Javascript 将过滤器添加到Extjs网格

当我点击filter按钮（见下文）时，我想向我的网格添加一些筛选器。必须使用filterpanel表单中的给定值将筛选器添加到网格中

在这个页面上，文本字段将被填充，当我点击filter按钮时，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");
    }
}
});

 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!");
    }
}

单击Filterbutton（过滤器按钮）时，这些值将传递到此控制器

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");
    }
}
});

 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!");
    }
}

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

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。

您可以使用

filterBy

方法来过滤与

网格相关联的底层
存储
。以下是一个例子：

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

谢谢你回答我的问题。它对我有用。我在控制器中添加了follow OnClick处理程序

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");
    }
}
});

 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!");
    }
}