Add a component below header in Extjs grid

Question

I have a grid in ExtJs5 with 3 columns. I want to add a component like textfield below header and before starting rows in a grid. Actually i want to filter data based on values in textfield.

Note - I don't want to add a textfield in header. I want below header of a grid.

Here is grid coding -

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();
            });

Here it is image - result of above code -

I have marked where i need a textboxes -

I got some solution of this problem like use tbar, bbar, dockedItems and many other but couldn't work as i want.

Answer 1

For anyone still interested in solution.

Use dockedItems that has weight more then the header to get the desired result. The weight of header is 100 so setting the weight of dockedItem to 101 ensures that the container with your textfield is below it.

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

Fiddle Link: https://fiddle.sencha.com/#view/editor&fiddle/25o2

Answer 2

try changing layout to 'vbox' and adding another item

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();
});

Link to fiddle: https://fiddle.sencha.com/#fiddle/rba