add combo box editor in grid header in ExtJS

Question

Can we add combo box in grid header in extjs ?

we have a special requirement here, if anybody has idea then please let me know.

Thanks Deepak

Answer 1

If you want it in the grid column header (for example to implement custom filters), look at http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid

Basically, you configure items in the column configuration and off you go:

Ext.define('KitchenSink.view.grid.BigData', {
    extend: 'Ext.grid.Panel',
    columns: [
        {
            xtype: 'gridcolumn',
            dataIndex: 'status',
            text: 'Item status'
            items: [
                {xtype: 'combobox'}
            ]

        }
    ]
});

Answer 2

You can use extjs tbar to implement components to grid header:

tbar: [
   { xtype: 'button', text: 'Button 1' }
]

or:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [
         { xtype: 'button', text: 'Button 1' }
    ]
}]

to implement combobox, best way is to define custom combobox component and provide alias for it, then in your grid tbar just say xtype: 'mygridcombo'

Here is a example.