PDA

View Full Version : issue with placing combo next to tab buttons



shobhaaradhya
11 Aug 2012, 4:32 AM
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
13 Aug 2012, 1:28 AM
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
17 Aug 2012, 5:23 AM
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:
38034

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
21 Feb 2013, 9:20 PM
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

4199441995