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

结果如下： enter image description here

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

Answer 1

我认为过滤是在Store级别应用的。

以下是文档中的代码段，其中包含一个示例：

过滤和排序

商店可以进行分类和过滤 - 无论是远程还是远程   本地。分拣机和过滤器保存在MixedCollection中   实例使它们易于管理。通常它足够了   要么只是在商店配置中指定分拣机和过滤器，要么   调用排序或过滤：

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

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

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

实例化Store之后的过滤和排序也是   简单。调用过滤器会向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;',
    });

GridPanel不显示商店和过滤器

2 个答案: