Studio Developer Manual / Version 2406.0
Table Of ContentsIn 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.
The following code defines a field
component and adds the plugin
BindPropertyPlugin
.
{ xtype: 'field', name: 'properties.' + config.propertyName, plugins: [ { bindTo: config.bindTo.extendBy('properties', config.propertyName), bidirectional: true, xclass: 'com.coremedia.ui.plugins.BindPropertyPlugin', } ] } // The same declaration in TypeScript: import Config from "@jangaroo/runtime/Config"; import BaseField from "@jangaroo/ext-ts/form/field/Base"; import BindPropertyPlugin from "@coremedia/studio-client.ext.ui-components/plugins/BindPropertyPlugin"; Config(BaseField, { name: 'properties.' + config.propertyName, plugins: [ Config(BindPropertyPlugin, { bindTo: config.bindTo.extendBy('properties', config.propertyName), bidirectional: true }) ] })
Example 5.3. Plugin usage in Ext JSON
Refer to blog post Using Plugins and Mixins in Your Sencha Apps by Seth Lemmons (October 23, 2014) for further details on Ext JS plugins.