extjs4 - Extjs filtering is not Working properly -

i new extjs. have written code applying filtering in grid, not working properly. attaching code snippet have written applying filtering. without filters, grid displayed @ panel.

        ext.create('ext.data.store', {         storeid: 'userdetailsstore',         fields: ['username', 'firstname', 'lastname', 'role', 'activeuser'],         data: {'items': [                 {"username": 'user1', "user1-firstname": "firstname", "lastname": "user1-lastname",                     "role": 'admin', "activeuser": 'y'},                 {"username": 'user2', "firstname": "user2-firstname", "lastname": "user2-lastname",                     "role": 'type1', "activeuser": 'y'},                 {"username": 'user3', "firstname": "user3-firstname", "lastname": "user3-lastname",                     "role": 'type2', "activeuser": 'y'},                 {"username": 'user4', "firstname": "user4-firstname", "lastname": "user4-lastname",                     "role": 'type3', "activeuser": 'y'},                 {"username": 'user5', "firstname": "user5-firstname", "lastname": "user5-lastname",                     "role": 'admin', "activeuser": 'y'},                 {"username": 'user6', "firstname": "user6-firstname", "lastname": "user6-lastname",                     "role": 'type4', "activeuser": 'y'}             ]},         proxy: {             type: 'memory',             reader: {                 type: 'json',                 root: 'items'             }         }     });      var filters = ext.create('ext.ux.grid.filtersfeature',             {         // ftype: 'filters',         encode: false,         autoreload: false,         local: true,         filters: [{                 type: 'string',                 dataindex: 'username'             }, {                 type: 'string',                 dataindex: 'firstname',                 disabled: true             }, {                 type: 'string',                 dataindex: 'lastname'             }, {                 type: 'list',                 dataindex: 'role',                 options: ['admin', 'type1', 'type2', 'type3', 'type4'],                 phpmode: true             }, {                 type: 'string',                 dataindex: 'activeuser'             }]     };      var user_view_grid = new ext.create('ext.grid.panel', {         title: 'user details',         border: false,         align: 'stretch',         store: ext.data.storemanager.lookup('userdetailsstore'),         loadmask: true,         features: [filters],         bbar: ext.create('ext.toolbar.paging', {             store: ext.data.storemanager.lookup('userdetailsstore')         }),         columns: [             {header: 'username', dataindex: 'username', flex: 1},             {header: 'firstname', dataindex: 'firstname', flex: 1},             {header: 'lastname', dataindex: 'lastname', flex: 1},             {header: 'role', dataindex: 'role', flex: 1},             {header: 'activeuser', dataindex: 'activeuser', align: 'center'}         ],         height: 200     });      var user_view_panel = new ext.panel({         region: 'north',         margins: '2 0 0 0',         cmargins: '5 5 0 0',         height: 200,         split: true,         collapsible: false,         border: true,         xtype: 'panel',         bodystyle:                 {                     "background-color": "#f8f8f8",                     "padding-left": "5px",                     "padding-right": "5px",                     "padding-bottom": "5px"                 },         items: [             user_view_grid         ]     });      ext.create('ext.container.viewport', {         layout: 'fit',         items: [{                 layout: 'border',                 defaults: {                     collapsible: false,                     split: false,                     bodystyle: 'padding:2px'                 },                 items: [                     {                         collapsible: false,                         region: 'center',                         title: 'user management',                         bodystyle: {"background-color": "#f8f8f8"},                         layout: {                             type: 'border',                             align: 'stretch'                         },                         items: [                             user_view_panel                         ]                     }                 ]             }],         renderto: ext.getbody()     }); 

i using extjs-4.2.2

in browser console, should have gotten 404 error, because "feature/filters.js couldn't loaded". because ftype:'filters' not provide information file extjs has include have required javascript available. can load file manually before applying ftype:

ext.require('ext.ux.grid.filtersfeature'); 

which tells extjs load file src/ux/grid/filtersfeature.js, or can take approach without ftype:

var filters = ext.create('ext.ux.grid.filtersfeature',{     encode: false,     ...