GridPanel не показывает магазин и фильтры

У меня есть GridPanel с 5 столбцами, я помещаю 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;',
    });

Вот результат: введите здесь описание изображения

Что я делаю не так? Заранее спасибо.


person S. Moreno    schedule 22.01.2015    source источник


Ответы (2)


Я считаю, что фильтрация применяется на уровне Store.

Вот фрагмент документации с примером:

Фильтрация и сортировка

Магазины можно сортировать и фильтровать — в обоих случаях удаленно или локально. Сортировщики и фильтры хранятся внутри экземпляров MixedCollection, чтобы упростить управление ими. Обычно достаточно либо просто указать сортировщики и фильтры в конфигурации Store, либо вызвать sort или filter:

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

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

Новое хранилище будет хранить настроенные сортировщики и фильтры в упомянутых выше экземплярах MixedCollection. По умолчанию сортировка и фильтрация выполняются локально хранилищем — см. разделы remoteSort и remoteFilter, чтобы позволить серверу выполнять эти операции вместо этого.

Фильтрация и сортировка после создания экземпляра Store также проста. Вызов фильтра добавляет еще один фильтр в хранилище и автоматически фильтрует набор данных (вызов фильтра без аргументов просто повторно применяет все существующие фильтры).

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

Объект Column не похоже, у него есть свойство фильтра, поэтому я не думаю, что вы можете сделать это таким образом.

Обычно я создаю форму над или сбоку от сетки с параметрами фильтрации для определенных полей. Вот Пример.

person Scriptable    schedule 22.01.2015

Наконец, нам нужно было только включить 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;',
    });
person S. Moreno    schedule 05.03.2015