Search code examples
extjscomboboxextjs3tabpanel

How to place combobox in the tab's title?


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'}
    ]
});

Solution

  • 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
                });
            }
        }
    });