Search code examples
javascriptextjsfilterextjs4

Extjs GridFilter feature don't work


I'm working in a Ruby On Rails + Ext js app.. and I'm trying to show a grid with the filter feature but I can't I've been reading a lot of post and even the Sencha example page but I can't make it work.

Here is the live code.. a simple grid without the gridpanel working https://fiddle.sencha.com/#fiddle/3fh

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.ux.grid.FiltersFeature',
    'Ext.toolbar.Paging'
]);



var store = Ext.create('Ext.data.Store', {

   fields: [
           {name: 'tipo', type: 'string'},
           {name: 'concepto', type: 'string'},
           {name: 'ingreso', type: 'int'},
           {name: 'egreso', type: 'int'},
           {name: 'por_alicuota', type: 'float'},
           {name: 'fecha', type: 'string', dateFormat:'m/Y'}
       ] ,     

   data: [
{tipo:'Fijo',concepto:'Ingresos por Cuotas',ingreso:345000,egreso:0,por_alicuota:0,fecha:'11/2013'},
{tipo:'Extra',concepto:'Ingresos por Sanciones',ingreso:24500,egreso:0,por_alicuota:0,fecha:'11/2013'}

          ],

})

var filtersCfg = {
        ftype: 'filters',
        local: true,
        filters: [{
                type: 'string',
                dataIndex: 'tipo'
            }, {
                type: 'string',
                dataIndex: 'concepto'
            }]
    };

var grid =   Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getElementById("leftPanel"),
        store: store,
        height: 300,
        filters : [filtersCfg],
        title: "grid view",

        columns: [
             {
                text: 'Pay',
                sortable: true,
                filterable: true,
                dataIndex: 'tipo'
            },
            {
                text: 'Concept',
                sortable: true,
                filterable: true,
                dataIndex: 'concepto',                    
            }]

});

Ext.onReady(function() {
    Ext.QuickTips.init();


    grid.render('content');
    grid.show();
});

Hope you guys can help me!


Solution

  • Replace filters: [filtersCfg], with features: [filtersCfg],, and remove this extra comma in dataIndex: 'concepto', which is likely to crash IE. It's important to note that the ExtJS file loader seems not to work in this fiddle (Type Error).