如何将combobox放置在标签的标题中？ [英] How to place combobox in the tab's title?

问题描述

是否可以在标签的标题中显示combobox（更好的是，它将是extjs组合）？

Is it possible to show combobox (better if it will be extjs combo) in the tab's title?

我创建了关于jsfiddle的示例但有这样的问题：

1.不可能显示combo的选项列表（鼠标点击不工作）

2.标签的高度不正确（我猜这可以

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).

示例代码：

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

推荐答案

感谢@ Alexander.Berg回答， （示例为此处）：

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

这篇关于如何将combobox放置在标签的标题中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！