Question

我使用extjs创建了一个表，其中有三列名称，电子邮件和汽车。在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

您可以在网格的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和maybe even load Ext.ux, as can be found in the last comment。其他读者请注意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中添加搜索过滤器

3 个答案: