Four Ways to add Features to Ext JS

9,563 views

Published on

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,563
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
81
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Four Ways to add Features to Ext JS

  1. 1. Adding Features to Ext JS Get Ext JS to do your bidding
  2. 2. Options ● Extend ● Override ● Plugin ● Sequence/Intercept
  3. 3. ExtendingNew component based on anotherInherits functionalitySomewhat lightweight (well come back to this)Four step process
  4. 4. Basic ExtendingPick a class to start from (well come back to this)CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: My Custom Panel }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {}});Ext.reg(custompanel, CustomPanel);
  5. 5. Basic ExtendingConfigure it with initComponent (well come back to this)CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: My Custom Panel }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {}});Ext.reg(custompanel, CustomPanel);
  6. 6. Basic ExtendingAdd your own methods (or override existing)CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: My Custom Panel }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {}});Ext.reg(custompanel, CustomPanel);
  7. 7. Basic ExtendingRegister it (for use as an xtype)CustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: My Custom Panel }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() { CustomPanel.superclass.overriddenMethod.call(this); }});Ext.reg(custompanel, CustomPanel);
  8. 8. Basic ExtendingParty (like its 1999)var myPanel = new CustomPanel({border: true});...items: [{ xtype: custompanel, border: true }]
  9. 9. Extend From...Classes that only need events should extend Ext.util.ObservableClasses that will serve as UI widgets should extend Ext.ComponentUse Ext.BoxComponent if simple layout management will be necessaryClasses that can contain other components should extend Ext.ContainerClasses that require a title bar, toolbar or other advanced display features shouldextend Ext.PanelLook at the docs to see the inheritance chain for classes (upper right corner)
  10. 10. How much overhead does extending add?
  11. 11. OverheadOnly as much code as you addCustomPanel = Ext.extend(Ext.Panel, { initComponent : function() { Ext.apply(this, { title: My Custom Panel }); CustomPanel.superclass.initComponent.call(this); }, newMethod: function() {}, overriddenMethod: function() {}});Ext.reg(custompanel, CustomPanel);
  12. 12. Prototypical Inheritance Ugly word, great for memory usage
  13. 13. Extending does not copy, it creates memory pointers. .constructor
  14. 14. OverrideOverwrites existing library codeUsed to change base functionality or fix bugsCan be evil (dont let it become your crutch)Keep separate from the your code (ie: overrides.js)
  15. 15. Basic Override// Class definitionExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {}});// Our overrideExt.override(ExtClass, { newMethod : function() {}, overriddenMethod : function() {}});
  16. 16. Basic OverrideexistingMethod remainsnewMethod is added (does not exist yet)overriddenMethod is completely replaced (exists already)// Class definitionExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {}});Ext.override(MyClass, { newMethod : function() {}, overriddenMethod : function() {}});
  17. 17. PluginsAdds functionality to various classesCan be used on any class that inherits from Ext.ComponentIndependent of base class (more on this later)
  18. 18. Basic PluginExtend a base class (usually a simple one)Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff }});Ext.preg(plugin-name,Ext.ux.PluginName);
  19. 19. Basic PluginProcess any plugin configuration (can be omitted)Ext.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff }});Ext.preg(plugin-name,Ext.ux.PluginName);
  20. 20. Basic PluginDo stuff on host class initializationExt.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff }});Ext.preg(plugin-name,Ext.ux.PluginName);
  21. 21. Basic PluginRegister the pluginExt.ux.PluginName = Ext.extend(Ext.util.Observable, { constructor: function(config){ Ext.apply(this,config); Ext.ux.PluginName.superclass.constructor.call(this, config); }, init: function(cmp){ // do stuff }});Ext.preg(plugin-name,Ext.ux.PluginName);
  22. 22. We Have a PluginParty (like its 1999) again...items: [{ xtype: custompanel, border: true, plugins: [{ ptype: plugin-name, isAwesome: false }]}]
  23. 23. Not awesome yet? (lets make it awesome)
  24. 24. Awesome PluginThe magic happens here init: function(cmp){ this.hostCmp = cmp cmp.setTitle(Awesome); }init is called just after initComponent but before render
  25. 25. Sequence/InterceptPiggyback on existing functionsUseful for small changes/featuresBe aware of impact
  26. 26. Basic Sequence/InterceptIntercept happens beforeSequence happens after
  27. 27. Basic Sequence/InterceptClass and method to sequence or interceptExt.intercept(Ext.form.Field.prototype, initComponent, function() {var fl = this.fieldLabel, ab = this.allowBlank;if (ab === false && fl) {this.fieldLabel = <span style="color:red;">*</span> +fl;} else if (ab === true && fl) {this.fieldLabel = +fl;}});
  28. 28. Basic Sequence/InterceptScope and arguments remain the sameExt.intercept(Ext.form.Field.prototype, initComponent, function() {var fl = this.fieldLabel, ab = this.allowBlank;if (ab === false && fl) {this.fieldLabel = <span style="color:red;">*</span> +fl;} else if (ab === true && fl) {this.fieldLabel = +fl;}});
  29. 29. Basic Sequence/Intercept...{ fieldLabel: Last Name, allowBlank: false, name: last},{ß fieldLabel: Company, allowBlank: true, name: company}...

×