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 であるため、weightofを 101 に設定すると、テキスト フィールドを含むコンテナーがそのdockedItem下にあることが保証されます。

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