GridPanel 不显示商店和过滤器

Question

我有一个 5 列的 GridPanel，我在每一行中都输入了 filter:true，但它没有显示过滤选项，也没有显示商店项目，我看到两行但它们是空的。

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

结果如下：

我做错了什么？提前谢谢你。

Answer 1

我相信过滤应用在Store 级别。

这是文档中的一个 sn-p，带有一个示例：

过滤和排序

可以对商店进行排序和过滤 - 在这两种情况下都可以远程或 本地。分类器和过滤器保存在 MixedCollection 中 实例，使它们易于管理。通常足以 要么只在 Store 配置中指定排序器和过滤器，要么 调用排序或过滤：

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

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

新的 Store 会将配置的排序器和过滤器保留在 上面提到的 MixedCollection 实例。默认情况下，排序和 过滤都由 Store 在本地执行 - 请参阅 remoteSort 和 remoteFilter 允许服务器执行这些操作。

Store 实例化后的过滤和排序也是 简单的。调用 filter 将另一个过滤器添加到 Store 和 自动过滤数据集（调用不带参数的过滤器 只需重新应用所有现有过滤器）。

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

Column 对象似乎没有过滤器属性，所以我认为您不能那样做。

我通常在网格上方或侧面创建一个表单，其中包含特定字段的过滤器选项。这是Example。

Answer 2

最后我们只需要在我的代码中包含plugins: 'gridfilters',。

这是最终代码：

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