extjs3.4:如何在网格上使用商店过滤器

时间:2014-12-19 12:59:25

标签: extjs filter grid store extjs3

我正在使用ExtJS3.4。 我想根据用户为billingstore选择的值过滤billingName。 那么,如何将选定的值传递给商店或网格?我如何实现这一目标?

这是我的代码:

// 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;

谢谢

2 个答案:

答案 0 :(得分:0)

根据您要通过商店中的简单过滤方法过滤的内容,您将获得所需的内容。

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

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

答案 1 :(得分:0)

查看此代码,ExtJS中的过滤器如何工作,需要属性(即根据您的示例进行过滤的billingName),然后'value'基于筛选器发生的过滤器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;