Question

我在ExtJs5中有一个有3列的网格。我想在标题下面和在网格中开始行之前添加像textfield这样的组件。实际上我想根据textfield中的值过滤数据。

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

这是网格编码 -

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的{{1}}来获得所需的结果。 header的{{1}}为100，因此将weight header设置为101可确保包含文本字段的容器位于其下方。

weight

This is how it will look

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

Answer 2

尝试将布局更改为＆＃39; vbox＆＃39; 并添加另一个项目

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

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

2 个答案: