Custom Ext JS 4 Plugin Example – Simple Grid filter

Custom Ext JS 4 Plugin Example – Simple Grid filter

Hi, in this article I will show you how you can create your own plugins for Ext JS 4 application. In the development process sometimes we meet the features which we need to use more than once time. We can resolve this by using custom plugin which can be also available for other developers in the larger projects.

1. How it works

Plugins in Ext JS 4 are used to add new custom functionality to the UI components. In my previous examples I used the grid filter functionality, so I decided to develop simple plugin with the similar features.

To create a custom plugin you can extend the Ext.AbstractPlugin class.

//Plugin must be a class and have a minimum init method and is called before initComponent method

The AbstractPlugin class is the base class from which user-implemented plugins should inherit. That class has an init method where you can put your code which will corresponds with underlaying UI components.

For more information you can knock this door:

Ext.AbstractPlugin

Let’s create a custom grid filter plugin.

2. Create a custom plugin

The Component passes itself as the sole parameter (init function):

Ext.define('Core.ux.panel.grid.ToolbarFilter', {
    extend: "Ext.AbstractPlugin",
    alias: "plugin.simplegridfilter",

    fieldName: 'name',
    /**
     * This method add filter input at the end of top toolbar elements
     * or if top toolbar doesnt exist, create new one with filter input
     *
     * @param component The ext panel cmp
     */
    init: function (component) {
        var me = this,
            toolbar = component.down('toolbar[dock=top]'),
            items = [
                {xtype: 'tbfill'},
                {
                    xtype: 'textfield',
                    itemId: 'filter',
                    listeners: {
                        specialkey: me.filterFn,
                        scope: this
                    }
                }
            ];

        if (toolbar == null) {
            component.addDocked(
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: items
                });
        }
        else
            toolbar.add(items);
    },
    /**
     * This method simply filter grid store
     *
     * @param field
     * @param e
     */
    filterFn: function(field, e) {
        var me = this, value = field.getValue();

        if (e.getKey() === e.ENTER) {
            var store = field.up('grid').getStore();

            store.clearFilter(true);
            store.filter(me.fieldName, value);
        }
    }
});

There are a few solutions how to keep custom files in MVC structure. I use different independent directory which you can reuse in the next projects:

app/

– controller

–model

–etc

lib/

–/ux

–/etc

That structure can be simply linked or copied into different project. Please register your custom library directory in app/app.js file and add the new plugin:

//register core library directory
Ext.Loader.setPath('Core', 'lib');
//load used classes
Ext.require('Core.ux.panel.grid.ToolbarFilter');

Ext.application({
    name: 'DevJS',

    requires: [
    ],
...

3. Implementation

Every Ext.panel.Panel has an array, which you can use to add plugins into component. You can also use just a single plugin name instead of array. More info about this field you can find here:

Ext.panel.Panel plugins

A simple implementation look like the following lines:

Ext.define('DevJS.view.users.List', {
    extend: 'Ext.grid.Panel',

    xtype: 'usersList',
    title: 'Users list',
    store: 'Users',

    viewConfig: {
        enableTextSelection: true,
        stripeRows: true
    },

    initComponent: function () {
        var me = this;

        this.plugins = [{ptype:'simplegridfilter', fieldName: 'login'}];
...

As you can see, only one line is responsible to turn on the new functionality. You can also pass settings using other object parameters, like for example fieldName, it’s custom value for server filter method.

4.The Result & Conclusion

In the below picture we can see the simple filter input, which we can easily implement in every Ext JS Grid.

ext-js-4-custom-plugin

In this post you saw how to create a custom Ext JS 4 plugins, with custom plugins you can make your code more reusable in the future. For example you can share some features between grid panels. Have fun and see you soon.

Comments:
omo
Reply
13/11/2013 at 1:55 PM

Bardzo fajny blog ,ale mimo, że nie mam problemu z angielskim artykuły mogłyby się ukazywać również w j. polskim tak jak na początku.]

Pozdrawiam

Łukasz Sudoł To reply on comment
Reply
14/11/2013 at 1:51 PM

Dzięki. Z obserwacji ruchu wynika, że największe zainteresowanie jest z poza Polski więc staramy się utrzymywać artykuły w języku angielskim. Ale postaram się również je stopniowo tłumaczyć. Jeszcze raz dzięki za opinię i życzę powodzenia. Pozdrawiam.

Leave a Reply to Łukasz Sudoł Cancel reply

Please fill all required fields


Drag circle to the rectangle on the right!

Send