issue with placing combo next to tab buttons

[shobhaaradhya]

Hi,

I want to place a combobox next to tab buttons. this should be visible for all tab buttons. The design should look similar to attached image. This may be something like placing combobox on tab panel with right aligned.

Can anyone help me to design this.

Thanks in advance,

[sword-it]

I think that you selected hard design but you should add this combo for each tab to their tbar.It's a way more easy..

[poojagarg89]

I also tried this but you can do one thing is don't apply in tbar of all tabs.............better go for tbar of that particular TabPanel so it will give u the combo common for all Tabs........!!!

Here is the screen shot:
test_tabpanel.jpg

here is the code for it:

test_tabs = new Ext.TabPanel({
    region:'center',
    id:'test_tabs',
    activeTab:0,
    layoutOnTabChange:true,
    margins:'0 5 5 0',
    resizeTabs:true,
    tabWidth:270,
    cls:"my-class1",
    minTabWidth: 270,
    enableTabScroll: true,
    items: [{
        id:'tab1',
        title: 'Tab 1',
        layout:'fit',
        region:'center',
        hideMode:'offsets',
        items:[]
    },{
        id:'tab2',
        title: 'Tab 2',
        layout:'fit',
        region:'center',
        hideMode:'offsets',
        items:[]
    }],
    tbar:[                                                        // TBAR of the Ext.TabPanel 
    " ","Test Combo"," "
    ,{
        xtype: "combo",
        id: "test_combo",
        name: "test_combo",
        store: "",
        displayField:"",
        valueField:"",
        queryMode: "local",
        emptyText:"Test Combo",
        width:200
    }]
});

[jaiwin]

I am the beginner of extjs. I need the combo with tabpanel like the image(tabpanel_with_combo_2.png), my ext code below,

{
xtype:'tabpanel',
flex:1,
layout: 'fit',
padding: '0px 0px 0px 0px',
style: {
background: 'none'
},
plain: false,
cls: 'tablayout',
border: false,
frame: false,
items: [{
title: 'Top 10 SLAs By Compliance',
autoScroll: true,
items: [{
xtype: 'top10slapanel'
}]
},{
title: 'Top 10 Components By Compliance',
autoScroll: true,
items: [{
xtype: 'top10componentspanel'
}]
}]
tbar:[{
xtype: 'scrollcombo',
labelWidth:150,
fieldLabel:'Filter By',
cls:'dropdown',
labelStyle: 'white-space: nowrap;',
name:'',
labelAlign:'left',
labelSeparator:''
}]
}

What should i change on this code. Can anyone help me to design this.

Thanks and Regards,
Jaiwin

tabpanel_with_combo_2.pngtabpanel_with_combo_1.png