In general, the recommended strategy for extending Ext JS components is to use the component plugin mechanism, rather than subclassing. Reusable functionality should be separated out into component plugins, and can then be used by components of completely different types, without requiring them to inherit from a common base class.
Plugins are configured in a component's plugins
property. A plugin must provide
an init
method accepting the component it is plugged into as parameter. This
method is called by the component when the component is initialized.
If a plugin defines a ptype
property, its type can be registered at the
ComponentMgr
.
ext.ComponentMgr.registerPlugin(pytpe, class)
Once registered, plugins of the given type can be instantiated using
ext.ComponentMgr.createPlugin(pluginConfig, defaultType)
The following code defines a field
component and adds the plugins
ImmediateChangeEventsPlugin
and BindPropertyPlugin
.
{ xtype: 'field', name: 'properties.' + config.propertyName, plugins: [ {ptype: com.coremedia.ui.config.immediateChangeEventsPlugin.ptype}, { bindTo: config.bindTo.extendBy('properties', config.propertyName), bidirectional: true, ptype: com.coremedia.ui.config.bindPropertyPlugin.ptype } ] }
Example 5.3. Plugin usage in Ext JSON
Refer to http://www.sencha.com/blog/advanced-plugin-development-with-ext-js/ for further details on Ext JS plugins.