Developing components and extensions for ext js
•Download as PPTX, PDF•
6 likes•4,172 views
This document discusses developing components and extensions for Ext JS. It begins with introductions and an example of how the presenter first encountered and used Ext JS for an internal portal application. It then covers Ext JS terminology like components, containers, extensions, plugins and mixins. It provides examples of creating a simple clock component extension with steps like identifying a base class, creating class files, and adding interactivity with plugins. The document emphasizes that extensions allow reuse and customization for other developers, and provides advanced extension examples like Ext Calendar Pro and Ext Scheduler.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Developing components and extensions for ext js
Similar to Developing components and extensions for ext js (20)
Recently uploaded
Recently uploaded (20)
Developing components and extensions for ext js
- 1. Developing Components and Extensions for Ext JS 2011 Mats Bryntse
- 2. About me presenter = { name:”Mats Bryntse”, from:”Helsingborg, Sweden”, usingExtSince:2007, website : ”www.bryntum.com”,, twitter: ”@bryntum” };
- 3. Before we start... Let’s do a raise of hands
- 7. Mission: Internal portal application
- 9. Lots of data input, forms etc.
- 10. Lots of tables to display
- 13. Architechture – data stores, widgets
- 15. Scoreboard
- 17. Customer happy
- 18. But... one feature we couldn’t solve using pure Ext JS at that time
- 21. No JavaScript based ones, hardly any web based either
- 24. So, is it interactive?
- 25. Is it at least beautiful?
- 26. Implement it anyway?ASP.NET No, sir No Hell Yeah!
- 27. Customer wanted Customer got #FAIL
- 28. Fast forward to 2009 >>
- 29. I decided to write my own
- 30. Conclusion Writing Ext JS components is a lot of fun (and addictive)
- 31. So where do I start? WTF??
- 32. Visit www.sencha.com GetExt JS SDK sencha.com/learn
- 34. Ext Container
- 35. Extension
- 36. Plugin
- 40. Ext.Component lifecycle and template methods * Initialization (constructor, initComponent) - Configuration, setup etc... * Rendering (onRender, afterRender) - Add additional elements and markup * Layout (afterLayout) - Executed after the component has been laid out * Destruction (onDestroy) - Clean up after yourself, destroy elements etc.
- 42. Handles the basic behavior of containing items: adding, inserting and removingitems.
- 45. Doesn’t have to be UI-related
- 47. Class properties The properties and methods you define for your class are added to the prototype of your class. Ext.define('MyClass', { extend: ’Ext.TabPanel’, favoriteTab : 3, someFunction : function() { ... } }); console.log(MyClass.prototype.favoriteTab); // => 3
- 48. Instantiating your class var foo = Ext.create('MyClass', { // Config properties }); // Or just use classic ’new’ var bar = new MyClass({ // Config properties });
- 49. Mixins
- 53. Plugins
- 55. Used to add a feature to a component, for example adding cell-editing to a GridPanel.
- 57. Using a plugin // Adding inline editing support to grid cells Ext.create(’Ext.grid.Panel',{ plugins: Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) });
- 58. Let’s create a simple extension !
- 59. A simple CSS 3 clock component
- 60. Step 1. Identify suitable base class
- 61. Step 2. Create a simple HTML page and JS files
- 62. Step 3. Create extension skeleton class Ext.define(”AwesomeClock”, { extend : ”Ext.Component”, cls: “myclock”, // A CSS class for styling afterRender : function() { // Call superclass this.callParent(arguments); } });
- 63. Step 3.5: simple app.js application file newAwesomeClock({ width : 320, height : 320, renderTo : Ext.getBody() });
- 64. Step 3.99: HTML file <html> <head> <!-- Ext JS CSS --> <linkrel="stylesheet"type="text/css"href="ext-4.0.0/ext-all.css"/> <!-- Our CSS for the extension --> <linkhref="css/awesomeclock.css"rel="stylesheet"type="text/css"/> <!-- Ext JS Library --> <scriptsrc="ext-4.0.0/bootstrap.js"type="text/javascript"></script> <!--Our own classes--> <scripttype="text/javascript"src="js/awesomeclock.js"></script> <!--Simple Test App File--> <scripttype="text/javascript"src="app.js"></script> </head> <body></body> </html>
- 65. Step 4. Does it run?
- 66. Step 5. Let’s add some code afterRender : function() { this.callParent(arguments); this.hourHand = this.el.createChild({...}); this.minuteHand = this.el.createChild({...}); this.date = new Date(); setInterval(Ext.Function.bind(this.updateHands, this), 1000); Ext.Function.defer(this.updateHands, 100, this); }, updateHands : function() { ... }
- 67. Step 6. Does it still run?
- 68. Step 7. Let’s add some CSS(3) .myclock { background:-moz-linear-gradient(bottom, blue, navy); border-radius: 100%; position:relative; border:2pxsolidwhite; -moz-transition: all0.4sease-in-out; } .myclock-hand { width : 10px; position:absolute; left:49%; -moz-transition: all1sease-in-out; border-radius: 10px10px00; }
- 69. Step 8. Are we done?
- 71. He can also extend our extension to add his own custom features
- 74. BobsWindow will contain an AwesomeClock
- 76. Adding behaviour through a plugin Plugin
- 77. Plugin skeleton Ext.define('MyPlugin', { init : function(hostClock) { this.clock = hostClock; // TODO, do something cool } }
- 78. Let’s write it!
- 80. We could then include it in another class
- 81. We also wrote a simple plugin for our component
- 85. Ext Scheduler
- 86. This is the nice thing about the Sencha products: if I can think of it I can build it