Ext JS plugins in the web UI framework

Ext JS plugins in the web UI framework

When you create a component using the Ext JS JavaScript framework, your config options
can include plugins, which provide custom functionality for a component.
Plugins are often used to change the look and feel of a screen. For
example, you could add a plugin to change the color of a page title
to red.

Before using the plugin, it must be registered in an application.
Plugins are registered for specific types of components.

Ext JS plugin methods in the web UI framework

The sc.plat.PluginRegistry class that is used by Ext JS
plugins includes the following methods for registering and deregistering
plugins:

  • registerPlugin(plugin, boolOverride)

    Adds plugin to registry.

  • registerTypePlugin(name, id)

    Registers the type with the plugin
    corresponding to the ID passed. Before a type is registered with an
    ID corresponding to a plugin, a plugin with that ID must be registered
    using the registerPlugin method.

  • unregisterTypePlugin(name, id)

    Unregisters the plugin for the
    component type if a plugin has been registered with the ID passed.

The following table describes the parameters for these
methods:

Parameter Method(s) Description
plugin registerPlugin
An object/array plugin object or array of plugin objects that includes:

  • (Required) An init method that accepts a reference of the type Ext.Component.
  • A property ID (id) that is the unique ID of the plugin object.
The order of plugin objects formed in the array is:

  1. Plugins registered under xtype (if any).
  2. Plugins registered under sctype (if any).
  3. Plugins registered under binding data (default implementation).
  4. Plugins passed while creating the component (if any).
boolOverride registerPlugin

An optional boolean value.

  • true – If the ID of the plugin passed is already registered against a different plugin, then the
    new plugin replaces the old plugin and the new plugin is registered against this ID.
  • false (default) – If two plugins are registered with the same id, then the first plugin takes
    precedent over the second plugin. The following message appears:

    ID already
    exists

lululu
  • registerTypePlugin
  • unregisterTypePlugin
(String) Component type name:

  • xtype or sctype
  • Custom type such as sourceBinding in bindingData of component
id registerTypePlugin (String) ID of the plugin.
id unregisterTypePlugin (String) The unique ID for each plugin that it was registered
against.

Creating ext JS plugins with the web UI framework

About this task

To register a plugin, use the sc.plat.PluginRegistry class
to register one of the following component types. When a component
is created, all of the plugins that are registered for any of these
types are passed as a config option, along with any other plugins.

  • xtype

    A standard config option defined by Ext JS.

  • sctype

    A standard component config option defined by . Screens can be
    grouped under different sctypes. The sctype can be passed as a config
    option to the component based on the screen where it is present.

  • A custom type like the attribute in binding data.

    The default
    implementation of this feature will look for an ID registered with
    the attribute in the source binding data. You can override the default
    implementation.

Example code for registering ext JS plugins in the web UI framework

The following example code shows how to register a plugin.
This code adds a plugin that sets the collapsible property to true
for all components that have the xtype panel.

var s = {
          	id: 'first',
	          init: function(comp){
                   comp.collapsible = true;
           }
	   };
	   sc.plat.PluginRegistry.registerPlugin(s);
	   sc.plat.PluginRegistry.registerTypePlugin('panel', 'first');

The
following example code shows how to unregister the plugin that was
registered in the above code.

sc.plat.PluginRegistry.unregisterTypePlugin('panel','panelid');

Join The Discussion

Your email address will not be published. Required fields are marked *