javascript - 在 Extjs 网格中的标题下方添加一个组件

Question

我在 ExtJs5 中有一个 3 列的网格。我想在标题下方和网格中开始行之前添加一个组件，如文本字段。实际上我想根据文本字段中的值过滤数据。

注意 - 我不想在标题中添加文本字段。我想要一个网格的标题下方。

这是网格编码 -

Ext.onReady(function () {
            var studentStore = new Ext.data.JsonStore({
                autoLoad: true,
                pageSize: 10,
                fields: ['Name', 'Age', 'Fee'],
                data: {
                    items: [
                        { "Name": 'Puneet', "Age": '25', "Fee": '1000' },
                        { "Name": 'Ankit', "Age": '23', "Fee": '2000' },
                        { "Name": 'Rahul', "Age": '24', "Fee": '3000' }
                    ]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        rootProperty: 'items'
                    }
                }
            });

            var window = new Ext.Window({
                id: 'grdWindow',
                width: 400,
                title: 'Grid Samples',
                items: [
                    {
                        xtype: 'panel',
                        layout: 'fit',
                        renderTo: Ext.getBody(),
                        items: [
                            {
                                xtype: 'grid',
                                id: 'grdSample',
                                height: 300,
                                store: studentStore,
                                columns: [
                                    {
                                        header: 'Name',
                                        dataIndex: 'Name'
                                    },
                                    {
                                        header: 'Age',
                                        dataIndex: 'Age'
                                    },
                                    {
                                        header: 'Fee',
                                        dataIndex: 'Fee'
                                    }
                                ]
                            }
                        ]
                    }
                ]
                }).show();
            });

这是图像 - 上面代码的结果 -

我已经标记了我需要文本框的地方 -

我得到了这个问题的一些解决方案，比如使用 tbar、bbar、dockedItems 和许多其他但无法按我想要的方式工作。

Answer 1

对于任何仍然对解决方案感兴趣的人。

使用dockedItems具有weight更多的header来获得所需的结果。weightofheader为 100，因此将 of 设置为weight101dockedItem可确保带有文本字段的容器位于其下方。

dockedItems: [{
                xtype: 'container',
                layout: 'hbox',
                weight: 101,
                items: [{
                    xtype: 'textfield',
                    width: 100,
                    emptyText: 'textfield 1'
                }, {
                    xtype: 'textfield',
                    width: 100,
                    emptyText: 'textfield 2'
                }, {
                    xtype: 'textfield',
                    width: 100,
                    emptyText: 'textfield 3'
                }]
            }]

这就是它的样子

小提琴链接：https ://fiddle.sencha.com/#view/editor&fiddle/25o2

Answer 2

尝试将布局更改为“vbox”并添加另一个项目

Ext.onReady(function() {
    var studentStore = new Ext.data.JsonStore({
        autoLoad: true,
        pageSize: 10,
        fields: ['Name', 'Age', 'Fee'],
        data: {
            items: [{
                "Name": 'Puneet',
                "Age": '25',
                "Fee": '1000'
            }, {
                "Name": 'Ankit',
                "Age": '23',
                "Fee": '2000'
            }, {
                "Name": 'Rahul',
                "Age": '24',
                "Fee": '3000'
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    });

    var window = new Ext.Window({
        id: 'grdWindow',
        width: 400,
        title: 'Grid Samples',
        items: [{
            xtype: 'panel',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'label',
                height: 45,
                text: 'Your text is here'
            }, {
                flex: 1,
                xtype: 'grid',
                id: 'grdSample',
                //height: 300,
                store: studentStore,
                columns: [{
                    header: 'Name',
                    dataIndex: 'Name'
                }, {
                    header: 'Age',
                    dataIndex: 'Age'
                }, {
                    header: 'Fee',
                    dataIndex: 'Fee'
                }]
            }]
        }]
    }).show();
});

小提琴链接： https ://fiddle.sencha.com/#fiddle/rba