向 Extjs 网格添加过滤器

Question

当我单击过滤器按钮时，我想向网格添加一些过滤器（见下文）。必须使用过滤器面板表单中的给定值将过滤器添加到网格中。

在此页面上，文本字段将被填充，当我单击过滤器按钮时，onFilterClick 处理程序将触发 FilterController。

Ext.define('path.to.filterPanel', {
    extend: 'Ext.form.Panel',

    xtype: 'filter',
    controller: 'dashboard-filter',

    viewModel: { 
        type: 'dashboard-filter' 
    },

    frame: false,
    bodyPadding: 10,
    layout: 'form',

    // the fields 
    items: [{
        xtype: 'textfield',
        name: 'firstName',
        id: 'firstName',
        fieldLabel: 'Firstname'
    }, {
        xtype: 'textfield',
        name: 'lastName',
        id: 'lastName',
        fieldLabel: 'Lastname'
    }],

     buttons: [
        text   : 'Filter',
        handler: 'onFilterClick' // trigger to the controller
    }]
});

单击“过滤器”按钮时，值将被推送到此控制器。

Ext.define('path.to.FilterController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.dashboard-filter',

    onFilterClick: function(button) {
   
        var form = button.up('form').getForm();
    
        if (form.isValid()) {
            // form valid 
        
            var firstName = Ext.getCmp("firstName").getValue();
            var lastName = Ext.getCmp("lastName").getValue();
        
            // check if there is some input
            if (!!employeeNumber || !!firstName || !!lastName) {
            

                // add filters but how??

            
            } 
        } else {
            // form not valid
            console.log("not valid");
        }
    }
});

最后这是必须添加过滤器的网格文件。

Ext.define('path.to.gridPanel, {
    extend: 'Ext.grid.Panel',

    requires: [
        'Ext.grid.column.Action',
        'App.store.Employees'
    ],

    controller: 'dashboard-gridVieuw',
    xtype: 'gridVieuw',
    store: 'Employees',
    
    stateful: true,
    collapsible: true,
    multiSelect: true,

    stateId: 'gridController',

    initComponent: function () {
        this.store = new App.store.Employees();
        var me = this;

        me.columns = [{
            header   : 'Firstname',
            flex     : 1,
            sortable : true,
            dataIndex: 'firstName'
        }, {
            header   : 'Lastname',
            flex     : 1,
            sortable : true,
            dataIndex: 'lastName'
        }]
    
    me.callParent();
    }
});

我使用 extjs 版本 5。

Answer 1

您可以使用

filterBy

方法来过滤与

store

关联的基础

grid

。这是一个例子：

Ext.getStore('myStore').filterBy(function(record, id) {
            if (record.get('firstName') === firstName) {
                return true;
            } else {
                return false;
            }
        });

这是一个小提琴，演示了过滤器的工作示例

Answer 2

感谢您回答我的问题。这个对我有用。我在控制器中添加了以下 OnClick 处理程序。

 onFilterClick: function(button) {

    var form = button.up('form').getForm();

    if (form.isValid()) {

        var fieldOne = Ext.getCmp("fieldOne").getValue();
        var fieldTwo = Ext.getCmp("fieldTwo").getValue();

        // check if there is some input
        if (!!fieldOne || !!fieldTwo) {

            // get store
            var store = Ext.data.StoreManager.lookup('store');

            // check if store not empty
            if(!Ext.isEmpty(store)){
                // clear filters and add a few new filters if params not empty
                store.clearFilter(true);

                if (!Ext.isEmpty(fieldOne)) {
                    store.filter("fieldOne",  fieldOne)
                }

                if (!Ext.isEmpty(fieldTwo)) {
                    store.filter("fieldTwo",  fieldTwo)
                }

                // count the filtered rows
               var count = store.snapshot ? store.snapshot.length : store.getCount();

                if (count == 0) {
                    alert("No data found!");
                    store.clearFilter();    
                }
            } else{
                //Store empty
                console.warn("Store's empty");
            }
        } else {
            // no values 
            alert("No entered data!");
        }
    } else {
        // form not valid
        alert("Form not valid!");
    }
}