GridPanel doesn't show store and filters

Question

I have a GridPanel with 5 columns, I put filter:true in every row but it doesn't show filter option and doesn't show the store items either, I see two rows but they are empty.

    storeSalvaguardas = [{'codigo':'10', 'tipoDocumento':'final','denominacion':'Documento de prueba', 'version':'2', 'descripcion':'eso'},{'codigo':'10', 'tipoDocumento':'final','denominacion':'Documento de prueba', 'version':'2', 'descripcion':'eso'}];

    grid = new Ext.grid.GridPanel({
        store: storeSalvaguardas,
        requires: [
                   'Ext.grid.filters.Filters'
               ],
        id: 'tablaGrid',
        trackMouseOver: true,
        columns: [
            {id:'codigo',header: '<bean:message key="label.agr.informes.codigo"/>', width: 10, sortable: true, dataIndex: 'codigo', filter: true},
            {id:'tDoc',header: '<bean:message key="label.gi.productos.tipo"/>', width: 10,sortable: true, dataIndex: 'tipoDocumento', filter: true},
            {id:'nombre',header: '<bean:message key="label.gestionRecursos.criterios.busqueda.tab1"/>', width: 15,sortable: true, dataIndex: 'denominacion', filter: true},
            {id:'version',header: '<bean:message key="label.gd.tab1.version"/>', width: 10,sortable: true, dataIndex: 'version', filter: true},
            {id:'descripcion',header: '<bean:message key="label.gd.tab3.anexos.columna.descripcion"/>', width: 55,sortable: false, dataIndex: 'descripcion', filter: true}
        ],
        bbar: [
            '<bean:message key="label.agr.dobleclic.modificar"/>'
        ],
        region: 'center',
        stripeRows: true,
        title:'<bean:message key="label.AGR.analisisgr.listadodocs"/>',
        frame:true,
        layout:'fit',
        border: true,
        loadMask: new Ext.LoadMask( Ext.getBody(), {
            msg:'<bean:message key="generic.label.cargando"/>'
        }), 
        forceFit: true,
        style: 'text-align: left;',
    });

Here is the result:

What am I doing wrong? Thank you in advance.

Answer 1

I believe filtering is applied at the Store level.

Here is a snippet from the documentation, with an example:

Filtering and Sorting

Stores can be sorted and filtered - in both cases either remotely or locally. The sorters and filters are held inside MixedCollection instances to make them easy to manage. Usually it is sufficient to either just specify sorters and filters in the Store configuration or call sort or filter:

var store = Ext.create('Ext.data.Store', {
     model: 'User',
     sorters: [{
         property: 'age',
         direction: 'DESC'
     }, {
         property: 'firstName',
         direction: 'ASC'
     }],

     filters: [{
         property: 'firstName',
         value: /Ed/
     }]
 });

The new Store will keep the configured sorters and filters in the MixedCollection instances mentioned above. By default, sorting and filtering are both performed locally by the Store - see remoteSort and remoteFilter to allow the server to perform these operations instead.

Filtering and sorting after the Store has been instantiated is also easy. Calling filter adds another filter to the Store and automatically filters the dataset (calling filter with no arguments simply re-applies all existing filters).

store.filter('eyeColor', 'Brown');

The Column object does not seem to have a filter property so I do not think you can do it that way.

I usually create a form above or at the side of the grid with filter options for particular fields. Here is an Example.

Answer 2

Finally only we needed to include plugins: 'gridfilters', in my code.

This is the final code:

grid = new Ext.grid.GridPanel({
            plugins: 'gridfilters',
            store: storeDocumento,
            listeners: {
                'rowdblclick': function (view, record, tr, columnIndex, e) {
                    var cell = e.getTarget('.x-grid-cell-inner');
                    if (!cell) {
                        return;
                    }
                var codigo = record.get('id_doc');

                alert('Codigo: ' + codigo);
            }
        },
        requires: [
                   'Ext.grid.filters.Filters'
               ],
        id: 'tablaGrid',
        trackMouseOver: false,
        columns: [
            {id:'id_doc',header: '', width: 10, sortable: true,  dataIndex: 'id_doc', filter: 'string', hidden: true},
            {id:'codigo',header: '<bean:message key="label.agr.informes.codigo"/>', width: 10, sortable: true,  dataIndex: 'codigo', filter: 'string'},
            {id:'tDoc',header: '<bean:message key="label.gi.productos.tipo"/>', width: 10,sortable: true, dataIndex: 'tipoDocumento', filter: 'list'},
            {id:'nombre',header: '<bean:message key="label.gestionRecursos.criterios.busqueda.tab1"/>',  dataIndex: 'denominacion',  width: 15,sortable: true,  filter: true},
            {id:'version',header: '<bean:message key="label.gd.tab1.version"/>', width: 10,sortable: true,  dataIndex: 'version', filter: 'number'},
            {id:'fecha',header: 'Fecha', width: 10, sortable: true,   dataIndex: 'fecha', filter: 'date'},
            {id:'descripcion',header: '<bean:message key="label.gd.tab3.anexos.columna.descripcion"/>', width: 55, dataIndex: 'descripcion', sortable: false, filter: false}
        ],
        bbar: [
            '<bean:message key="label.agr.dobleclic.modificar"/>'
        ],
        region: 'center',
        stripeRows: true,
        title:'<bean:message key="label.AGR.analisisgr.listadodocs"/>',
        frame:true,
        layout:'fit',
        border: true,
        loadMask: new Ext.LoadMask( Ext.getBody(), {
            msg:'<bean:message key="generic.label.cargando"/>'
        }), 
        forceFit: true,
        style: 'text-align: left;',
    });