close

Filter

loading table of contents...

Studio Developer Manual / Version 2110

Table Of Contents

5.1.2 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.

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.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.