0
Adding Features to Ext JS     Get Ext JS to do your bidding
Options          ● Extend          ● Override          ● Plugin          ● Sequence/Intercept
ExtendingNew component based on anotherInherits functionalitySomewhat lightweight (well come back to this)Four step process
Basic ExtendingPick a class to start from (well come back to this)CustomPanel = Ext.extend(Ext.Panel, {    initComponent :...
Basic ExtendingConfigure it with initComponent (well come back to this)CustomPanel = Ext.extend(Ext.Panel, {    initCompon...
Basic ExtendingAdd your own methods (or override existing)CustomPanel = Ext.extend(Ext.Panel, {    initComponent : functio...
Basic ExtendingRegister it (for use as an xtype)CustomPanel = Ext.extend(Ext.Panel, {    initComponent : function() {     ...
Basic ExtendingParty (like its 1999)var myPanel = new CustomPanel({border: true});...items: [{ xtype: custompanel, border:...
Extend From...Classes that only need events should extend Ext.util.ObservableClasses that will serve as UI widgets should ...
How much overhead does extending add?
OverheadOnly as much code as you addCustomPanel = Ext.extend(Ext.Panel, {    initComponent : function() {       Ext.apply(...
Prototypical Inheritance         Ugly word, great for memory usage
Extending does not copy, it creates memory pointers.                  .constructor
OverrideOverwrites existing library codeUsed to change base functionality or fix bugsCan be evil (dont let it become your ...
Basic Override// Class definitionExtClass = Ext.extend(Ext.Component, {    existingMethod: function() {}    overriddenMeth...
Basic OverrideexistingMethod remainsnewMethod is added (does not exist yet)overriddenMethod is completely replaced (exists...
PluginsAdds functionality to various classesCan be used on any class that inherits from Ext.ComponentIndependent of base c...
Basic PluginExtend a base class (usually a simple one)Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {    constructor...
Basic PluginProcess any plugin configuration (can be omitted)Ext.ux.PluginName = Ext.extend(Ext.util.Observable, {    cons...
Basic PluginDo stuff on host class initializationExt.ux.PluginName = Ext.extend(Ext.util.Observable, {    constructor: fun...
Basic PluginRegister the pluginExt.ux.PluginName = Ext.extend(Ext.util.Observable, {    constructor: function(config){    ...
We Have a PluginParty (like its 1999) again...items: [{    xtype: custompanel,    border: true,    plugins: [{       ptype...
Not awesome yet? (lets make it awesome)
Awesome PluginThe magic happens here  init: function(cmp){     this.hostCmp = cmp     cmp.setTitle(Awesome);  }init is cal...
Sequence/InterceptPiggyback on existing functionsUseful for small changes/featuresBe aware of impact
Basic Sequence/InterceptIntercept happens beforeSequence happens after
Basic Sequence/InterceptClass and method to sequence or interceptExt.intercept(Ext.form.Field.prototype, initComponent, fu...
Basic Sequence/InterceptScope and arguments remain the sameExt.intercept(Ext.form.Field.prototype, initComponent, function...
Basic Sequence/Intercept...{       fieldLabel: Last Name,       allowBlank: false,       name: last},{ß       fieldLabel: ...
Four Ways to add Features to Ext JS
Upcoming SlideShare
Loading in...5
×

Four Ways to add Features to Ext JS

7,246

Published on

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

No Downloads
Views
Total Views
7,246
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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}...
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×