Combobox next to tab button

[shobhaaradhya]

Hi,

I am not into design. I am trying to design a tab in extjs where a combo box should be placed next to the tab buttons like what have attached below the image. What are the properties I need to set for this?

Sample code would be great.

Also I dont want to fix header text for the gridcolumns at design time, the header text should also take like dataIndex. The header should come from json or anyother datasource.

tab.png

Thanks in advance

[sword-it]

Hi,

1.You can use following code for set grid header dynamically on storeload event of grid :-

var column = yourgrid.getColumnModel();
 column.setColumnHeader(index of column header, 'value');

2. For placing combo in your tab panel:-

you may use a separate toolbar above tabpanel in order to make a combo.
you may put whatever you want in that toolbar i.e. button, text field , combo,etc.. as per your needs and do operations based on that!

but if you really needs to put a a combo in tabpanel's tab, you may use following code , BUT BEWARE it will render a simple html select field rather than a extjs combo.

var tabs = new Ext.TabPanel({
        renderTo: Ext.getBody(),
        activeTab: 0,
        items: [{
            title: 'Tab 1',
            html: 'A simple tab'
        }, {
            title: 'Tab 2',
            html: 'Another one'
        },
        {
            title: '<select> <option>abc</option><option>xyz</option></select>'
        }]
    });