Add a component below header in Extjs grid

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.

Answers


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


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


Need Your Help

Hiding implementational detail from parent classes

c# oop

Suppose I'm designing a robot that can pickup various tools and use them.

Find factorial of each element in a list and multiply them

python list python-3.x

I have to calculate the factorial of each element in a list, multiply them, and save the result in an integer variable. I have the factorial function, but I don't know how to do these manipulations...