ExtJS - Rejilla filtro de valor múltiple en la misma columna

votos
1

ayuda necesaria en la rejilla filtrante con múltiples valores.

Estoy tratando de crear un menucheckitem con muchos valoran teléfono. Y filtrar la red basado en el teléfono facturado.

Por mediante el siguiente código, soy capaz de filtrar la rejilla sobre la base de un solo valor.

store.filter([{
    property: 'type',
    value: value
}]);

Ahora quería para filtrar la red, incluso si selecciono muchos checkboxs telefónicas. He intentado utilizar store.filterBy (). Sin embargo, no funciona correctamente, no sé lo que estoy haciendo mal.

prueba var = [ 111-222-333, 111-222-334, 111-222-335]

store.filterBy(function(record, val){
      return test.indexOf(record.get('phone')) != -1 
    }
});

Esto filtra el primer valor sólo decir 111-222-333 valor sólo .. No filtrando todo otro valor en la prueba.

encontrar código de ejemplo aquí - https://fiddle.sencha.com/#view/editor&fiddle/2ll7

Publicado el 19/09/2018 a las 17:01
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Así que se bifurcó su violín, rehice y creo que he conseguido lo que quería. En primer lugar su definición de menucheckitemen bbarera un poco extraño. Creo que se necesita una lista de teléfonos que serían casillas de verificación, pero la lista es depende de los registros de la tienda, por lo que debe ser construir dinámicamente (como lo hice en afterrender). En realidad, este debe estar dentro de la tienda de loadevento, pero en el ejemplo que no disparó (tal vez bcz es un tipo de memoria de la tienda). De todos modos cuando se copia el código que tendrá que poner todo el afterrendercontenido dentro de la tienda loadevento.

VIOLÍN

Ext.application({
name: 'Fiddle',

launch: function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: {
            fields: ['name', 'email', 'phone', 'type'],
            data: [{
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '111-222-334',
                type: 'Foo'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '111-222-333',
                type: 'Foo'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '111-222-334',
                type: 'Foo'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '111-222-335',
                type: 'Bar'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '111-222-335',
                type: 'Bar'
            }, {
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '111-222-336',
                type: 'Bar'
            }]
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email'
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }, {
            text: 'Type',
            dataIndex: 'type'
        }],
        listeners: {
            afterrender: function (grid) {
                var store = grid.store;
                var phones = store.getData().items.map(function (r) { //get the phones
                    return r.get('phone');
                });
                var phonesFiltered = [];
                phones.forEach(function (p) { //filter them to make records unique
                    if (!phonesFiltered.includes(p)) {
                        phonesFiltered.push(p);
                    }
                });
                var items = [];
                phonesFiltered.forEach(function (p) { //create `menucheckitem` items with phone names and attaching `checkchange` event
                    items.push({
                        xtype: 'menucheckitem',
                        text: p,
                        listeners: {
                            checkchange: function (checkbox, checked, eOpts) {
                                var menu = checkbox.up('menu');
                                var filterPhones = [];
                                menu.items.items.forEach(function (c) { //get all checked `menucheckitem`-s
                                    if (c.checked) {
                                        filterPhones.push(c.text);
                                    }
                                });
                                var store = checkbox.up('grid').store;
                                store.clearFilter();
                                if (filterPhones.length > 0) {
                                    store.filterBy(function (record) {
                                        return this.filterPhones.indexOf(record.get('phone')) !== -1;
                                    }, {
                                        filterPhones: filterPhones
                                    });
                                }
                            }
                        }
                    });
                });
                //
                Ext.getCmp('toolbarId').add({
                    xtype: 'menu',
                    // height: 120,
                    floating: false,
                    items: items
                });
            }
        },
        bbar: {
            xtype: 'toolbar',
            height: 200,
            id: 'toolbarId'
        },
        renderTo: Ext.getBody()
    });
}
});
Respondida el 19/09/2018 a las 20:42
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more