Ext JS 4 Plugin and Extension Development: This book makes it fast and fun for ExtJS developers to get to grips with developing plugins and extensions. The step-by-step instructions, with plentiful examples and code, will give you the skills in no time.

Ext.ux.form.MultiSelect is a form field type which allows the selection of one or more items from a list. A list is populated using a data store. Items can be reordered via the drag-and-drop method, if the ddReorder property of this class is set to true.

Here, in the following code, a form panel class has been defined, in which the MultiSelect extension has been used as an item of this form:

Ext.define('Examples.view.multiselect.MultiSelectFormPanel', {
  extend : 'Ext.form.Panel',
  alias : 'widget.multiselectformpanel',
  requires : ['Ext.ux.form.MultiSelect'],

  constructor : function(config) {

    Ext.apply(this, {
      bodyPadding : 10,
      items : [{
        anchor : '100%',
        xtype : 'multiselect',
        fieldLabel : 'Multi Select',
        name : 'multiselect',
        store : Ext.create('Examples.store.DummyStore'),
        valueField : 'name',
        displayField : 'name',
        ddReorder : true,
        listeners : {
          change :...

ItemSelector is a specialized MultiSelect field that renders as a pair with the MultiSelect field; one with the available options and the other with the selected options. A set of buttons in between, allows the items to be moved between the fields and reordered within the selection. Also, they can be moved via drag-and–drop method.

Here, in the following code, a form panel class is defined, in which we are using the ItemSelector extension as an item of this form:

Ext.define('Examples.view.itemselector.ItemSelectorFormPanel', {
  extend : 'Ext.form.Panel',
  alias : 'widget.itemselectorformpanel',
  requires : ['Ext.ux.form.ItemSelector'],

  constructor : function(config) {

    Ext.apply(this, {
      bodyPadding : 10,
      items : [{
        anchor : '100%',
        xtype: 'itemselector',
        name: 'itemselector',
        store : Ext.create('Examples.store.DummyStore'),
        valueField : 'name',
        displayField : 'name',
        fromTitle: 'Available...

This plugin provides a drag and/or drop functionality for a TreeView class. It creates a specialized instance of DragZone, which knows how to drag out of a TreeView class, and loads the data object which is passed on to the cooperating methods of DragZone with the following properties:

It also creates a specialized instance of Ext.dd.DropZone, which cooperates with other DropZone classes. These DropZone classes are members of...

Ext.ux.CheckColumn is an extension of Ext.grid.column.Column that renders a checkbox in each column cell. This checkbox toggles the truthiness of the associated data field on a click. In addition to toggling a Boolean value within the record data, this class adds or removes a CSS class x-grid-checked, on the <td> element based on whether or not it is checked to alter the background image used for a column.

Here in the following code we are defining a grid class in which we are using the CheckColumn extension to provide a checkbox within each cell of a column:

Ext.define('Examples.view.checkcolumn.CheckColumnGrid', {
  extend : 'Ext.grid.Panel',
  alias : 'widget.checkcolumngrid',
  requires : ['Examples.store.DummyStore',
              'Ext.ux.CheckColumn'],

  constructor : function(config) {

    Ext.apply(this, {
      border : false,
      store : Ext.create('Examples.store.DummyStore'),
      columns : [{
        header : 'Name',
        dataIndex : 'name...

The Ext.grid.plugin.CellEditing plugin injects editing at the cell level for a Grid. The editor field can be a field instance or a field configuration which needs to be provided within the editor configuration option within the columns definition. With the CellEditing plugin we can edit a cell at any time. If an editor is not specified for a particular column, that cell cannot be edited and it will be skipped when activated via the mouse or the keyboard.

When we configure a column to use an editor for cell editing, we should choose an appropriate field type to match the data type that this editor field will be editing. For example, to edit a date value in the cell, it would be useful to specify Ext.form.field.Date as the editor.

Here, in the following code we are defining a grid class in which we are using the CellEditing plugin to edit the cells:

Ext.define('Examples.view.cellediting.CellEditingGrid', {
  extend : 'Ext.grid.Panel',
  alias : 'widget.celleditingGrid'...

The Ext.grid.plugin.RowEditing plugin injects editing at the row level for a Grid. When editing begins, a small floating dialog will be shown for the appropriate row. Each editable column will show a field for editing. There is a button to save or cancel all changes for the edit. The editor field can be a field instance or a field configuration and we need to provide this within the editor configuration option within the column definition. If an editor is not specified for a particular column, the cell of that column will not be editable and the value of the cell will be displayed.

When we configure a column to use an editor for row editing, we should choose an appropriate field type to match the data type that this editor field will be editing. For example, to edit a date value in the cell, it would be useful to specify Ext.form.field.Date as the editor.

Here, in the following code we are defining a grid class in which we are using the RowEditing plugin to edit the row...

Ext.ux.LiveSearchGridPanel is a GridPanel class that supports live search.

Here, in the following code, a grid panel class is defined by extending the LiveSearchGridPanel extension:

Ext.define('Examples.view.livesearch.LiveSearchGrid', {
  extend : 'Ext.ux.LiveSearchGridPanel',
  alias : 'widget.livesearchgrid',
  requires : ['Examples.store.DummyStore'],

  constructor : function(config) {

    Ext.apply(this, { 
      border : false,
      store : Ext.create('Examples.store.DummyStore'),
      columns : [{
        header : 'Name',
        dataIndex : 'name',
        flex : 1
      },{
        header : 'Birth date',
        dataIndex : 'birthdate',
        renderer : Ext.util.Format.dateRenderer('m/d/Y'),
        flex : 1
      }]
    });

    this.callParent(arguments);

  }
});

In the following screenshot you can see the result of the LiveSearchGrid class that we have defined, which is used within a window:

You can see that a grid panel with a Search input...

Ext JS is really a rich library that provides several ready-to-use, useful extensions and plugins. In this chapter we went through some of those popular extensions and plugins, and learned how to use them.

In the next chapter we will go through hands-on development of an extension called Labeled Spinner by extending the Ext.form.field.Spinner class.