如何将组合框放置在选项卡的标题中？

是否可以在选项卡标题中显示组合框（如果是 extjs 组合则更好）？

我创造了jsfiddle 上的一个例子 http://jsfiddle.net/andron/v4ZzT/但存在这样的问题：
1.无法显示Combo的选项列表（鼠标点击不起作用）
2.选项卡的高度不正确（我想这可以通过将高度应用于组合来修复）。

示例代码：

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

回答您的问题：

1. the Tabpanel成分是preventDefaulttab点击时的事件，所以我们需要修改onStripMouseDown method.

2. 如果我们定义一些东西title属性，然后 extjs 会将其放入span.x-tab-strip-texthtml 元素具有特殊的样式。因此，我们需要在选项卡中的该元素之后附加组合框。

代码：

new Ext.TabPanel({
    renderTo : 'tab-with-combo',
    activeTab : 0,
    items : [{
            title : 'First tab ',
            listeners : {
                afterrender : function (panel) {
                    //the needed tabEl
                    var tabEl = panel.findParentByType('tabpanel').getTabEl(panel);
                    var tabStripInner = Ext.fly(tabEl).child('span.x-tab-strip-inner', true);
                    //we need that for have the combobox in the same line as the text
                    Ext.fly(tabStripInner).child('span.x-tab-strip-text', true).style.float = 'left';
                    //create the combobox html element
                    var combo = document.createElement("select");
                    var opt1 = document.createElement("option");
                    opt1.innerHTML = 'Option 1';
                    var opt2 = document.createElement("option");
                    opt2.innerHTML = 'Option 2';
                    combo.appendChild(opt1);
                    combo.appendChild(opt2);
                    combo.style.float = 'left';                 
                    //add the combobox to the tab
                    tabStripInner.appendChild(combo);
                }
            }
        }, {
            title : 'Second tab'
        }
    ],

    //this is the tab's click handler
    onStripMouseDown : function (e) {
        if (e.button !== 0) {
            return;
        }
        var t = this.findTargets(e);
        if (t.close) {
            //preventDefault needed to move here
            e.preventDefault();
            if (t.item.fireEvent('beforeclose', t.item) !== false) {
                t.item.fireEvent('close', t.item);
                this.remove(t.item);
            }
            return;
        }
        if (t.item && t.item != this.activeTab) {
            this.setActiveTab(t.item);
        }
    },
});