Developing components and extensions for ext js

6,522 views
6,366 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,522
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
135
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Developing components and extensions for ext js

  1. 1. Developing Components and Extensions for Ext JS<br />2011 Mats Bryntse<br />
  2. 2. About me<br />presenter = {<br />name:”Mats Bryntse”, <br /> from:”Helsingborg, Sweden”,<br />usingExtSince:2007,<br />website : ”www.bryntum.com”,,<br /> twitter: ”@bryntum”<br />};<br />
  3. 3. Before we start...<br />Let’s do a raise of hands<br />
  4. 4. How many has heard of:<br /><ul><li>jQuery?
  5. 5. Ext JS?</li></li></ul><li>If you haven’t seen/heard<br />www.sencha.com<br />
  6. 6. How I met Ext JS<br /><ul><li>Stumbled upon Ext 2007 at SEMC
  7. 7. Mission: Internal portal application
  8. 8. Data-heavy application
  9. 9. Lots of data input, forms etc.
  10. 10. Lots of tables to display
  11. 11. Had to run on the best, most awesome browser in the world</li></li></ul><li>Can you guess which one?<br />
  12. 12. Requirements<br /><ul><li>Solid grid – Lots of data lists
  13. 13. Architechture – data stores, widgets
  14. 14. Polished UI without requiring deep HTMLor CSS knowledge.</li></li></ul><li>We prototyped<br />Microsoft Ajax<br />jQuery<br />Ext JS<br />
  15. 15. Scoreboard<br />
  16. 16. Result<br /><ul><li>Ext JS worked out well!
  17. 17. Customer happy
  18. 18. But... one feature we couldn’t solve using pure Ext JS at that time
  19. 19. A visual scheduling widget</li></li></ul><li>Customer wants:<br />
  20. 20. Search began<br /><ul><li>Found a few flash ones, not allowed to use
  21. 21. No JavaScript based ones, hardly any web based either
  22. 22. But after serious Googling research we did find something...</li></li></ul><li>”WidgetX”<br />Image blurred to protect you<br />
  23. 23. Widget X review<br /><ul><li>Is it JavaScript based?
  24. 24. So, is it interactive?
  25. 25. Is it at least beautiful?
  26. 26. Implement it anyway?</li></ul>ASP.NET<br />No, sir<br />No<br />Hell Yeah!<br />
  27. 27. Customer wanted<br />Customer got<br />#FAIL<br />
  28. 28. Fast forward to 2009<br />>><br />
  29. 29. I decided to write my own<br />
  30. 30. Conclusion<br />Writing Ext JS components is a lot of fun (and addictive)<br />
  31. 31. So where do I start?<br />WTF??<br />
  32. 32. Visit www.sencha.com<br />GetExt JS SDK<br />sencha.com/learn<br />
  33. 33. Ext JS Terminology & Concepts<br /><ul><li>Ext Component
  34. 34. Ext Container
  35. 35. Extension
  36. 36. Plugin
  37. 37. Mixin</li></li></ul><li>Ext.Component<br /><ul><li>Base class for most popular Ext widgets </li></ul>(GridPanel, TabPanel, TextField etc...)<br /><ul><li>Can be part of any layout structure as a child of a Container.
  38. 38. All subclasses of Component has a managed lifecycle (creation, rendering and destruction)which is provided by the Container class. </li></li></ul><li>Ext.Component: Base class for most popular Ext widgets<br />
  39. 39. Ext.Component<br /><ul><li>Can be part of any layout structure as a child of a Container.</li></li></ul><li>Ext.Component lifecycle<br /><ul><li>All subclasses of Component has a managed lifecycle (creation, rendering and destruction)which is provided by the Container class. </li></ul>Constructor<br />Initialize<br />Render<br />Destroy<br />
  40. 40. Ext.Component lifecycle and template methods<br />* Initialization (constructor, initComponent)<br /> - Configuration, setup etc...<br />* Rendering (onRender, afterRender)<br /> - Add additional elements and markup<br />* Layout (afterLayout)<br /> - Executed after the component has been laid out<br />* Destruction (onDestroy)<br /> - Clean up after yourself, destroy elements etc.<br />
  41. 41. Ext.Container<br /><ul><li>Base class for any Component that needs to contain other Components.
  42. 42. Handles the basic behavior of containing items: adding, inserting and removingitems.
  43. 43. The most commonly used Container classes are Panel, Window and TabPanel.</li></li></ul><li>What is an Ext JS extension?<br />?<br />
  44. 44. Ext JS extension<br /><ul><li>Subclassing an Ext JS ”class”
  45. 45. Doesn’t have to be UI-related
  46. 46. Reusable throughout your app</li></li></ul><li>Simple extension<br />Ext.define('MyClass', {<br /> extend: ’Ext.TabPanel’,<br />constructor: function() {<br /> alert(”Look ma, I have tabs”);<br />this.callParent();<br /> }<br />});<br /> <br />
  47. 47. Class properties<br />The properties and methods you define for your class are added to the prototype of your class.<br />Ext.define('MyClass', {<br /> extend: ’Ext.TabPanel’,<br /> favoriteTab : 3,<br /> someFunction : function() { ... }<br />});<br />console.log(MyClass.prototype.favoriteTab); // => 3<br />
  48. 48. Instantiating your class<br />var foo = Ext.create('MyClass', {<br />// Config properties<br />});<br /> <br />// Or just use classic ’new’<br />var bar = new MyClass({<br />// Config properties<br />});<br />
  49. 49. Mixins<br />
  50. 50. Mixins<br /><ul><li>Brand new concept when it comes to Ext JS 4. A mixin is just a set of functions (and sometimes properties) that are merged into a class.
  51. 51. Mixins are really useful when a class needs to inherit multiple traits but can’t do so easily using a traditional single inheritance mechanism</li></li></ul><li>Mixins - example<br /><ul><li>Ext.Windowis a draggable component, as are Sliders, Grid headers, and many others </li></li></ul><li>Mixins - example<br /><ul><li>Because this behavior is desired in many different places it’s not feasible to work the draggable behavior into a single superclass
  52. 52. Creating a Draggablemixin solves this problem – anything can now be draggable very easily.</li></li></ul><li>Mixins<br />// We can define some mixins at definition time<br />Ext.define('MyClass', {<br /> mixins: {<br /> observable: 'Ext.util.Observable'<br /> }<br />});<br /> <br />// It’s easy to add more later too<br />MyClass.mixin('draggable', 'Ext.util.Draggable');<br />
  53. 53. Plugins<br />
  54. 54. Plugins<br /><ul><li>A plugin augments a single instance of an Ext Component. Any object with an initmethod.
  55. 55. Used to add a feature to a component, for example adding cell-editing to a GridPanel.
  56. 56. During its initialization phase, the host component calls the init method of all its plugins, and passes itself as the only argument</li></li></ul><li>Defining a plugin<br />// Simplest possible plugin<br />var mySillyPlug = {<br /> init : function(host) { alert(’Hello world’); }<br />};<br /> <br />
  57. 57. Using a plugin<br />// Adding inline editing support to grid cells<br />Ext.create(’Ext.grid.Panel',{<br /> plugins: Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 <br />})<br />});<br /> <br />
  58. 58. Let’s create a simple extension<br />!<br />
  59. 59. A simple CSS 3 clock component<br />
  60. 60. Step 1. Identify suitable <br />base class<br />
  61. 61. Step 2. Create a simple HTML page and JS files<br />
  62. 62. Step 3. Create extension skeleton class<br />Ext.define(”AwesomeClock”, {<br />extend : ”Ext.Component”,<br />cls: “myclock”, // A CSS class for styling<br /> afterRender : function() {<br />// Call superclass<br />this.callParent(arguments);<br />}<br />});<br />
  63. 63. Step 3.5: simple app.js<br />application file<br />newAwesomeClock({<br /> width : 320,<br /> height : 320,<br /> renderTo : Ext.getBody()<br />});<br />
  64. 64. Step 3.99: HTML file<br /><html><br /><head><br /><!-- Ext JS CSS --><br /><linkrel="stylesheet"type="text/css"href="ext-4.0.0/ext-all.css"/><br /><!-- Our CSS for the extension --><br /><linkhref="css/awesomeclock.css"rel="stylesheet"type="text/css"/><br /><!-- Ext JS Library --><br /><scriptsrc="ext-4.0.0/bootstrap.js"type="text/javascript"></script><br /><!--Our own classes--><br /><scripttype="text/javascript"src="js/awesomeclock.js"></script><br /><!--Simple Test App File--><br /><scripttype="text/javascript"src="app.js"></script><br /></head><br /><body></body><br /></html><br />
  65. 65. Step 4. Does it run?<br />
  66. 66. Step 5. Let’s add some code<br />afterRender : function() {<br />this.callParent(arguments);<br />this.hourHand = this.el.createChild({...});<br />this.minuteHand = this.el.createChild({...});<br />this.date = new Date();<br />setInterval(Ext.Function.bind(this.updateHands, this), 1000);<br />Ext.Function.defer(this.updateHands, 100, this);<br />},<br />updateHands : function() { ... }<br />
  67. 67. Step 6. Does it still run?<br />
  68. 68. Step 7. Let’s add some CSS(3)<br />.myclock<br />{<br />background:-moz-linear-gradient(bottom, blue, navy);<br />border-radius: 100%;<br />position:relative;<br />border:2pxsolidwhite;<br />-moz-transition: all0.4sease-in-out;<br />}<br />.myclock-hand<br />{<br />width : 10px;<br />position:absolute;<br />left:49%;<br />-moz-transition: all1sease-in-out;<br />border-radius: 10px10px00;<br />}<br />
  69. 69. Step 8. Are we done?<br />
  70. 70. Now another developer Bob can use this extension...<br /><ul><li>As a child item in one of his Ext panels
  71. 71. He can also extend our extension to add his own custom features
  72. 72. He can create plugins to add functionality</li></li></ul><li>So what does Bob want to do?<br />
  73. 73. Bob has a vision!<br /><ul><li>Create a new Window extension ”AwesomeWindow”
  74. 74. BobsWindow will contain an AwesomeClock
  75. 75. Adds controls to change time</li></li></ul><li>Let’s make Bob happy!<br />
  76. 76. Adding behaviour through a plugin<br />Plugin<br />
  77. 77. Plugin skeleton<br />Ext.define('MyPlugin', {<br />init : function(hostClock) {<br />this.clock = hostClock;<br />// TODO, do something cool<br /> } <br />}<br />
  78. 78. Let’s write it!<br />
  79. 79. To sum it up:<br /><ul><li>We created our own AwesomeClock class
  80. 80. We could then include it in another class
  81. 81. We also wrote a simple plugin for our component
  82. 82. Was it cool?</li></li></ul><li>No - your example sucks, and it’s really boring too btw. #fail<br />
  83. 83. <ul><li>We built a very ”low level” extension
  84. 84. Let’s see a few advanced extensions built with Ext JS</li></li></ul><li>Ext Calendar Pro<br />www.ext-calendar.com<br />
  85. 85. Ext Scheduler<br />
  86. 86. This is the nice thing about the Sencha products: if I can think of it I can build it<br />
  87. 87. @bryntum<br />mats@bryntum.com<br />

×