Thanks for @Alexander.Berg answer, this works correctly (example is here):
var comboId = Ext.id();
new Ext.TabPanel({
cls: 'tab-panel-with-combo',
renderTo: 'tab-with-combo',
activeTab: 0,
items:[
{
title: '<div class="tab-title" style="float: left; padding-right: 5px;">First tab with a long name</div> ' +
'<div style="float: right;" id="' + comboId + '" ></div>',
closable: true,
html: 'Content of the first tab'
},
{
title: '<div class="tab-title">Second tab</div>',
closable: true,
html: 'Content of the second tab'
}
],
listeners: {
afterrender: function() {
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'case_name'],
data : [
['one', 'Case #1'],
['two', 'Case #2'],
['three', 'Case #3']
]
});
new Ext.form.ComboBox({
store: store,
displayField:'case_name',
editable: false,
typeAhead: false,
selectOnFocus:false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a case...',
renderTo: comboId
});
}
}
});