extjs3.4：如何在网格上使用存储过滤器答案

【问题标题】：extjs3.4: How to use store filter on a gridextjs3.4：如何在网格上使用存储过滤器
【发布时间】：2015-02-18 10:15:57
【问题描述】：

我正在使用 ExtJS3.4。我想根据用户为billingName 选择的值过滤billingstore。那么，如何将选择的值传递给商店或网格？我如何做到这一点？

这是我的代码：

// Store for the grid panel - has billing grid data     
        this.billingStore = new Ext.data.JsonStore({
                autoLoad: {params:{start: 0, limit: 2}},
                filter: {billingName}
                proxy: new Ext.data.HttpProxy({
                    url: '/ELCM/Client/getBillingList.do',
                }),
                root: 'data',
                fields: ['billingName','billingAmount','usedData','duration'],
                totalProperty:'totalRows'
        });
        var billingStore = this.billingStore;

    //view billing
        this.billingGrid = new Ext.grid.GridPanel({
                    title: 'View Billing',
                    store: that.billingStore,
                    columns:[
                          {header: "Amount",dataIndex: 'billingAmount'},
                           {header: "Data Used", dataIndex: 'usedData'},
                           {header: "Duration", dataIndex: 'duration'}
                         ],
                    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
                    bbar: new Ext.PagingToolbar({
                           store: that.billingStore,       // grid and PagingToolbar using same store
                           displayInfo: true,
                           pageSize: 2
                        }),
                     listeners: {
                                rowclick : function(grid, rowIndex, e){
                                 console.log("row Index "+rowIndex);
                                 }
                      }
        }); 
        var billingGrid = this.billingGrid;

谢谢

【问题讨论】：

标签： extjs filter grid store extjs3

【解决方案1】：

根据您要过滤的内容，通过商店上的简单过滤方法即可实现您要的内容。

billingGrid.getStore().filter([{
            property: '',
            id: '',
            value: 
        }
]);

查看http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-filter 了解更多信息。

【讨论】：

你能告诉我应该如何发送用户选择的值吗？
如果用户从网格中选择一个值，你需要一个监听器连接到你的网格，然后将值从监听器传递给上面的过滤器方法。 docs.sencha.com/extjs/4.2.2/#!/api/…
不，在我的情况下，用户将从具有billingname 的网格中选择一行，然后我需要打开一个新网格，其中包含特定于所选billingname 的详细信息

【解决方案2】：

查看这段代码，ExtJS 中的过滤器是如何工作的过滤器发生的这 2 个是过滤器功能工作所需的强制选项，其他可选配置属性是 exactMatch 和 caseSensitive，它们增加了过滤器功能的准确性。

试试下面的代码

// Store for the grid panel - has billing grid data     
this.billingStore = new Ext.data.JsonStore({
            autoLoad: {params:{start: 0, limit: 2}},
            filter: [{
                    property: 'billingName', 
                    value: ''//Data source which need to be filter or based on value selected by the user for billingName
                    exactMatch: true,
                    caseSensitive: true
                }],
            proxy: new Ext.data.HttpProxy({
                url: '/ELCM/Client/getBillingList.do',
            }),
            root: 'data',
            fields: ['billingName','billingAmount','usedData','duration'],
            totalProperty:'totalRows'
    });

var billingStore = this.billingStore;

//view billing
    this.billingGrid = new Ext.grid.GridPanel({
                title: 'View Billing',
                store: that.billingStore,
                columns:[
                      {header: "Amount",dataIndex: 'billingAmount'},
                       {header: "Data Used", dataIndex: 'usedData'},
                       {header: "Duration", dataIndex: 'duration'}
                     ],
                sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
                bbar: new Ext.PagingToolbar({
                       store: that.billingStore,       // grid and PagingToolbar using same store
                       displayInfo: true,
                       pageSize: 2
                    }),
                 listeners: {
                            rowclick : function(grid, rowIndex, e){
                             console.log("row Index "+rowIndex);
                             }
                  }
    }); 
    var billingGrid = this.billingGrid;

【讨论】：