ExtJS 5：在网格上使用 searchfield + gridfilters 插件答案

【问题标题】：ExtJS 5 : Using searchfield + gridfilters plugin on a gridExtJS 5：在网格上使用 searchfield + gridfilters 插件
【发布时间】：2016-03-24 09:05:07
【问题描述】：

我使用 extJS 5.1.0，但在网格上遇到问题：我想使用搜索字段和列上的 gridfilters 插件过滤数据。

当我只使用 gridfilters 插件时，它可以工作。当我只使用搜索字段时，它也可以工作。

但是当我同时使用这两个时，列过滤器不能正常工作：文本是在“查询”参数而不是“过滤器”参数中传递的，所以它像搜索字段一样过滤网格。

这是我的看法：

Ext.define('OP.view.GridProduits', {
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.gridproduits'
    ,itemId:'grid'
    ,forceFit: true
    ,layout: {
        type: 'fit'
    }
    ,cls: 'x-tree-noicon'
    ,rowLines:true
    ,stateful:true
    ,stateId:'gridproduitsstate'
    ,title:TradOP9
    ,id_outil:0
    ,initComponent: function() {
        var me = this;

        var produits_store = Ext.create('OP.store.ProduitsStore');

        if(me.id_outil && me.id_outil > 0) {    
            produits_store.proxy.extraParams.id_outil = me.id_outil
        }

        me.store = produits_store;

        this.dockedItems = [
            {
                xtype: 'pagingtoolbar'
                ,store: me.getStore()
                ,dock: 'bottom'
                ,displayInfo: true
            },
            {
                xtype: 'toolbar'
                ,dock: 'top'
                ,itemId: 'toptoolbar'
                ,items: [
                    TradOP27 + ' :'
                    ,{
                        xtype:'searchfield'
                        ,store:me.store
                        ,width: 200
                        ,id:'searchField'+me.id_outil
                        ,itemId:'searchField'+me.id_outil
                        ,name:'searchField'+me.id_outil
                    }
                ]
            }
        ];

        this.columns = [
            {
                xtype: 'actioncolumn'
                ,minWidth:40
                ,maxWidth:40
                ,groupable:false
                ,items: [
                    {
                        tooltip: TradOP21
                        ,itemId: 'row-open'
                        ,action: 'open'
                        ,getClass: function(v, m, rec, row, col, store) {
                            return 'icon-zoom';
                        }
                        ,iconCls: 'icon-16'
                        ,handler: function(grid, rowIndex, colIndex, item, e, record) {
                            this.up('panel').fireEvent('itemopenbuttonclick', grid, record);
                        }
                    }
                ]
            }
            // ID
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'id'
                ,text: 'ID'
                ,minWidth:40
                ,maxWidth:40
                ,groupable:false
                ,filter:{
                    type: 'numeric'
                    ,dataIndex: 'PRODUIT.id'
                }
            }
            // Code
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'ref_interne'
                ,text:TradOP12
                ,flex:1
                ,groupable:true
                ,sortable:true
                ,itemId:'testtest'
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.ref_interne'
                }
            }
            // Nom
            ,{
                xtype: 'gridcolumn'
                ,text:TradOP13
                ,dataIndex: 'libelle'
                ,flex:1
                ,groupable:true
                ,sortable:true
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.libelle'
                }
            }
            // Famille
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'famille'
                ,text:TradOP14
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.GpProduit'
                }
            }
            // Outil
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'id_outil'
                ,text:TradOP15
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.id_outil'
                }
                ,hidden:me.id_outil ? true : false
            }
            // Client
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'nom_client'
                ,text:TradOP16
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'client.nom'
                }
            }
            // Plan
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'plan'
                ,text:TradOP17
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.GpArticle'
                }
            }
            // Indice
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'indice'
                ,text:TradOP18
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'string'
                    ,dataIndex: 'PRODUIT.statut'
                }
            }
            // Stock
            ,{
                xtype: 'gridcolumn'
                ,dataIndex: 'stock'
                ,text:TradOP19
                ,groupable:true
                ,sortable:true
                ,flex:1
                ,filter:{
                    type: 'numeric'
                    ,dataIndex: 'PRODUIT_MVT_STOCK.reste'
                }
            }
        ];

        this.plugins = 'gridfilters';

        me.callParent(arguments);


    }


});

我做错了吗？

谢谢...

马克西姆

【问题讨论】：

标签： extjs extjs5

【解决方案1】：

只需添加一个过滤器即可。这是实现它的方法。

https://fiddle.sencha.com/#fiddle/17kp

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    itemId: 'toptoolbar',
    items: [{
        xtype: 'textfield',
        width: 200,
        id: 'searchField',
        itemId: 'searchField',
        name: 'searchField',
        listeners: {
            change: function(field, newValue) {

                // remove the existing filter.
                shows.removeFilter('searchFilter');

                // add filter if there is a search field value.
                if (newValue && newValue.length > 0) {
                    var searchFilter = new Ext.util.Filter({
                        id: 'searchFilter',
                        anyMatch: true,
                        caseSensitive: false,
                        property: 'show',
                        value: newValue
                    });

                    // update the filter
                    shows.addFilter(searchFilter);
                }
            }
        }
    }]
}],

【讨论】：