Four Ways to add Features to Ext JS
-
Upload
shea-frederick -
Category
Technology
-
view
6.892 -
download
0
Transcript of Four Ways to add Features to Ext JS
![Page 1: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/1.jpg)
Adding Features to Ext JS
Get Ext JS to do your bidding
![Page 2: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/2.jpg)
Options
● Extend● Override● Plugin● Sequence/Intercept
![Page 3: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/3.jpg)
Extending
New component based on another
Inherits functionality
Somewhat lightweight (well come back to this)
Four step process
![Page 4: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/4.jpg)
Basic Extending
Pick 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);
![Page 5: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/5.jpg)
Basic Extending
Configure 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);
![Page 6: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/6.jpg)
Basic Extending
Add 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);
![Page 7: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/7.jpg)
Basic Extending
Register 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);
![Page 8: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/8.jpg)
Basic Extending
Party (like it's 1999)
var myPanel = new CustomPanel({border: true});
...items: [{ xtype: 'custompanel', border: true }]
![Page 9: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/9.jpg)
Extend From...
Classes that only need events should extend Ext.util.Observable
Classes that will serve as UI widgets should extend Ext.Component
Use Ext.BoxComponent if simple layout management will be necessary
Classes that can contain other components should extend Ext.Container Classes that require a title bar, toolbar or other advanced display features should extend Ext.Panel Look at the docs to see the inheritance chain for classes (upper right corner)
![Page 10: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/10.jpg)
![Page 11: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/11.jpg)
How much overhead does extending add?
![Page 12: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/12.jpg)
Overhead
Only as much code as you add 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);
![Page 13: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/13.jpg)
Prototypical Inheritance
Ugly word, great for memory usage
![Page 14: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/14.jpg)
Extending does not copy, it creates memory pointers.
.constructor
![Page 15: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/15.jpg)
Override
Overwrites existing library code
Used to change base functionality or fix bugs
Can be evil (don't let it become your crutch)
Keep separate from the your code (ie: overrides.js)
![Page 16: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/16.jpg)
Basic Override
// Class definition ExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {}}); // Our override Ext.override(ExtClass, { newMethod : function() {}, overriddenMethod : function() {}});
![Page 17: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/17.jpg)
Basic Override
existingMethod remains newMethod is added (does not exist yet)overriddenMethod is completely replaced (exists already)
// Class definition ExtClass = Ext.extend(Ext.Component, { existingMethod: function() {} overriddenMethod : function() {}}); Ext.override(MyClass, { newMethod : function() {}, overriddenMethod : function() {}});
![Page 18: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/18.jpg)
Plugins
Adds functionality to various classes
Can be used on any class that inherits from Ext.Component
Independent of base class (more on this later)
![Page 19: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/19.jpg)
Basic Plugin
Extend 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);
![Page 20: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/20.jpg)
Basic Plugin
Process 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);
![Page 21: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/21.jpg)
Basic Plugin
Do stuff on host class initialization
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);
![Page 22: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/22.jpg)
Basic Plugin
Register the plugin
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);
![Page 23: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/23.jpg)
We Have a Plugin
Party (like it's 1999) again
...items: [{ xtype: 'custompanel', border: true, plugins: [{ ptype: 'plugin-name', isAwesome: false }]}]
![Page 24: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/24.jpg)
Not awesome yet?
(lets make it awesome)
![Page 25: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/25.jpg)
Awesome Plugin
The magic happens here
init: function(cmp){ this.hostCmp = cmp cmp.setTitle('Awesome'); }
init is called just after initComponent but before render
![Page 26: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/26.jpg)
Sequence/Intercept
Piggyback on existing functions
Useful for small changes/features
Be aware of impact
![Page 27: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/27.jpg)
Basic Sequence/Intercept
Intercept happens before
Sequence happens after
![Page 28: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/28.jpg)
Basic Sequence/Intercept
Class and method to sequence or intercept
Ext.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;}});
![Page 29: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/29.jpg)
Basic Sequence/Intercept
Scope and arguments remain the same
Ext.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;}});
![Page 30: Four Ways to add Features to Ext JS](https://reader035.fdocuments.us/reader035/viewer/2022062312/5550d625b4c90599308b5196/html5/thumbnails/30.jpg)
Basic Sequence/Intercept
...{ fieldLabel: 'Last Name', allowBlank: false, name: 'last'},{ß fieldLabel: 'Company', allowBlank: true, name: 'company'}...