如何在 EXTJS 中添加搜索过滤器

Question

我使用 extjs 创建了一个 table，其中包含三列 name、email 和 cars。在 extjs 中，我们有一个默认的排序方法。在这里我想为所有这三列添加搜索方法，这样我也可以使用姓名、电子邮件和汽车进行搜索。我需要为以下代码做哪些更改预期的输出是我需要在每列下获取搜索过滤器选项。

 Ext.define('ViewerModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.viewermodel',

    stores: {

        mystore: {

            fields: ['name', 'email', 'cars'],
            data: {
                'items': [{
                    'name': 'Lisa',
                    "email": "lisa@simpsons.com"
                }, {
                    'name': 'Bart',
                    "email": "bart@simpsons.com"
                }, {
                    'name': 'Homer',
                    "email": "homer@simpsons.com"
                }, {
                    'name': 'Marge',
                    "email": "marge@simpsons.com"
                }]
            },

            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        }

    }
});

Ext.define('APP.HorizontalBox', {
    extend: 'Ext.container.Container',
    requires: ['Ext.layout.container.HBox'],
    xtype: 'layout-horizontal-box',
    width: 750,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    bodyPadding: 10,

    defaults: {
        frame: true,
        bodyPadding: 10
    },
    viewModel: {
        type: 'viewermodel'
    },

    items: [{
        xtype: 'grid',
        title: 'Grid: click on the grid rows',
        itemId: 'myGridItemId',
        flex: 1.2,
        margin: '0 10 0 0',
        bind: {
            store: '{mystore}',
            selection: '{users}'
        },
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 0.5
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Cars',
            dataIndex: 'cars',
            flex: 1
        }],

        dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                padding: '2 5 2 5',
                text: 'Edit item',
                handler: function (btn) {
                    var grid = btn.up('grid');
                    var selectedRow = grid.getSelectionModel().getSelection()[0];
                    var janela = Ext.create('APP.MyWindow', {
                        animateTarget: btn.getEl(),
                        //EDITED
                        viewModel: {
                            data: {
                                users: selectedRow
                            }
                        }
                    }).show();
                }
            }]
        }],
    }, {
        xtype: 'form',
        title: 'View',
        itemId: 'panelbindItemId',
        flex: 1,
        margin: '0 10 0 0',
        defaults: {
            labelWidth: 50
        },
        items: [{
            xtype: 'displayfield',
            margin: '20 0 0 0',
            fieldLabel: 'Name',
            bind: '{users.name}'
        }, {
            xtype: 'displayfield',
            fieldLabel: 'Email',
            bind: '{users.email}'
        }]
    }]
});

Ext.define('APP.MyWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.mywindow',

    reference: 'windowreference',

    title: 'MyWindow | Edit record',
    closable: true,
    modal: true,
    padding: '10px',
    height: 150,
    layout: 'fit',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {

            items: [{
                xtype: 'form',
                layout: 'anchor',
                defaults: {
                    padding: '5 0 5 0'
                },
                items: [{
                    xtype: 'textfield',
                    margin: '10 0 0 0',
                    fieldLabel: 'Name',
                    bind: '{users.name}'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Email',
                    bind: '{users.email}'
                }]
            }]
        });

        me.callParent(arguments);

    }
});

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('APP.HorizontalBox', {
            renderTo: document.body,
            width: 750,
            height: 400,
            title: 'Title'
        });

    }
});

Answer 1

你可以在grid的afterrender事件中完成（参考这个post。）例如：

listeners: {
                afterrender: function () {
                    var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                    menu.add([{
                        text: 'Search',
                        iconCls: 'x-fa fa-home',
                        handler: function () {
                            console.log("Search Item");
                        }
                    }]);
                }
            }

检查此 Fiddle。

Answer 2

您搜索的是FiltersFeature，用法如下：

xtype:'grid',
...
features:[{
    ftype: 'filters',
    local: true,
    filters: [{
        type: 'string',
        dataIndex: 'name'
    }, {
       ... (one definition for every column you want to allow filtering one)
    }]
}]

请注意，您必须添加 requires 和。其他读者请注意 FiltersFeature 是 ExtJS4 特定的，并且 has been moved around for ExtJS 5 and 6.

Answer 3

您也可以使用此代码，它会使用日期搜索数据。

listeners: {
                afterrender: function () {
                    var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                    menu.add([{
            xtype:'datefield',
            name:'date1',
            fieldLabel:'Filter By',
            format: 'y-m-d',
            listeners:{
                 renderer: Ext.util.Format.dateRenderer('y-m-d'),
                        field:{ xtype:'datefield',
                                autoSync:true,
                                allowBlank:false,
                                editor: new Ext.form.DateField(
                                        {format: 'y-m-d'})  }
            }
        }

如何在 EXTJS 中添加搜索过滤器

How to add search filter in EXTJS

extjs

extjs4