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

【问题标题】：Add a component below header in Extjs grid在 Extjs 网格中的标题下方添加一个组件
【发布时间】：2015-10-20 08:12:22
【问题描述】：

我在 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 和许多其他但无法按我的意愿工作。

【问题讨论】：

标签： javascript extjs extjs5 extjs-grid

【解决方案1】：

尝试将布局更改为“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

【讨论】：

嗨维塔卢哈，感谢您的回复。当我将布局更改为 vbox 时，它不显示网格。当我在网格之前使用适合布局和额外项目时，它会在网格之前显示文本框，或者可以说第一个文本框显示然后网格。但我想在标题下方添加文本框。检查我的问题中的图像并在提琴手中执行您的代码以检查结果。
检查这个小提琴：fiddle.sencha.com/#fiddle/rba 如果您需要帮助添加这些复选框（在我有“标签”的项目中），请告诉我
亲爱的vitaluha，我需要标题下方/之后的文本框，而不是标题之前的文本框。请再次检查我附有问题的图片。
我通过在网格中使用以下代码得到了这个问题的解决方案。但它只在 ExtJs3 中有效，我想要在 ExtJS5 中。视图：新的 Ext.grid.GridView({ headerRows: [ { columns: [ component.......................] } });

【解决方案2】：

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

使用具有weight 的dockedItems 多于header 以获得所需的结果。 header 的 weight 为 100，因此将 dockedItem 的 weight 设置为 101 可确保包含您的文本字段的容器位于其下方。

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'
                }]
            }]

This is how it will look

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

【讨论】：