As many other people I am trying to implement the grid filtering using this plugin:


That comes in the examples of ExtJS4.1 inside "ux".

There is an example of that working:


But as most of the examples it doesn't use MVC or Sencha Architect.

I tried to use it in Sencha Architect in the last version, that is: 2.1.0 build 637.

I found some problems:

  1. I am using groupingfeature and summaryfeature so I already have a "features" configuration for the grid, plus it is read-only, I just can add the components that are available. Filtering is none of them.
  2. After adding the
    requires: [

I had to copy the ux folder in my application so now the application finds the javascript required and loads the application.

According to the example, the way to add the filtering to a grid is like the following:

var filters = {
        ftype: 'filters',
        // encode and local configuration options defined previously for easier reuse
        encode: encode, // json encode the filter query
        local: local,   // defaults to false (remote filtering)
        filters: [{
            type: 'numeric',
            dataIndex: 'id'
        }, {
            type: 'string',
            dataIndex: 'company',
            disabled: true
        }, {
            type: 'numeric',
            dataIndex: 'price'
        }, {
            type: 'date',
            dataIndex: 'date'
        }, {
            type: 'list',
            dataIndex: 'size',
            options: ['small', 'medium', 'large', 'extra large'],
            phpMode: true
        }, {
            type: 'boolean',
            dataIndex: 'visible'
Then in the grid we can add the feature:
var grid = Ext.create('Ext.grid.Panel', {
        border: false,
        store: store,
        columns: createHeaders(4),
        loadMask: true,
        features: [filters],
        bbar: Ext.create('Ext.toolbar.Paging', {
            store: store
But using Sencha Architect, you cannot add the filtering feature in the code (unless you override) without creating your own "property" then you will have a duplicated property if you use groupingfeature or summaryfeature,etc.


Moreover, you cannot add the feature from Sencha Architect:


So, what should I do to make the filtering feature to work using Sencha Architect, how can you use any UX component from Sencha Architect ?

A tutorial in the "learn" section (sencha.com) would be nice.

Any comment about this will be welcome.

Thanks in advance.