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

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;',
    });