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:
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:
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.
Comments:
omo
13/11/2013 at 1:55 PMBardzo 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
14/11/2013 at 1:51 PMDzię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.