7. 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);
8. Basic Extending
Party (like it's 1999)
var myPanel = new CustomPanel({border: true});
...items: [{ xtype: 'custompanel', border: true }]
9. 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)
15. 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)
18. 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)
19. 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);
20. 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);
21. 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);
23. We Have a Plugin
Party (like it's 1999) again
...items: [{
xtype: 'custompanel',
border: true,
plugins: [{
ptype: 'plugin-name',
isAwesome: false
}]
}]
25. Awesome Plugin
The magic happens here
init: function(cmp){
this.hostCmp = cmp
cmp.setTitle('Awesome');
}
init is called just after initComponent but before render
28. 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;
}
});
29. 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;
}
});