loading table of contents...

5.1.3. Component Plugins

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.