Is it possible to show combobox (better if it will be extjs combo) in the tab's title?
I have created an example on jsfiddle but there are such issues:
1. It is not possible to show combo's options list (mouse click don't work)
2. Tab's height is incorrect (I guess this can be fixed by applying height to the combo).
Sample code:
new Ext.TabPanel({
renderTo: 'tab-with-combo',
activeTab: 0,
items:[
{
title: 'First tab ' +
'<select>' +
'<option>Option 1</option>' +
'<option>Option 2</option>' +
'</select>'},
{title: 'Second tab'}
]
});
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
});
}
}
});