Add combo box editor in grid header in ExtJS

Question

Is it possible to add a combo box in the grid header in extjs?

we have a special requirement, if anyone has an idea, please let me know.

Thanks Deepak

Answer 1

If you want a grid column header (for example, to create custom filters), see http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/# big-data-grid

Basically, you are setting items in the column configuration and you can:

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 in the 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 a custom combobox component and provide alias for it, then in your tbar grid just say xtype: 'mygridcombo'

Here is an example.

Answer 3

This works well for me.

  { text : 'Save Energy Mode', dataIndex: 'fs', items: [{ xtype: 'combobox', padding: 2, flex: 1 }] } 

or just (if you do not need the title text)

  columns: { items: [{ xtype: 'combobox'}] } 

Answer 4

If you can use it on a grid toolbar, then the Davor clause is the way to go. If you really need this in the grid header (for example, for filtering by columns), you can check the example of filtering the grid in Ext JS documents: http://docs.sencha.com/extjs/4.2.1/#!/example/grid -filtering / grid-filter-local.html