Extjs：在 TabPanel 中，如何在每个选项卡的标题中放置一个复选框？答案

【问题标题】：Extjs: in TabPanel, how to put a checkbox in each tab's header?Extjs：在 TabPanel 中，如何在每个选项卡的标题中放置一个复选框？
【发布时间】：2015-12-11 22:40:55
【问题描述】：

看起来很简单，但经过多次尝试和在线搜索，仍然没有成功。

环境： ExtJS 3.4

这是我正在开发的一个 jsfiddle：http://jsfiddle.net/v4ZzT/8/

new Ext.TabPanel({
    renderTo: 'tab-with-chkbox',
    activeTab: 0,
    items:[
        {
            title: '<input type="checkbox"> Disabled?</input>',
            html: 'Sample panel'
        }
    ]
});

但该复选框不响应点击。

还在 sencha 论坛上找到此链接： http://www.sencha.com/forum/showthread.php?114794-Checkbox-in-tab-header 它建议更改 iconCls。但我找不到检测此图标是否被点击的方法。

【问题讨论】：

我有一个类似的问题（将组合框放在标签的耳朵里）。您可以查看它是如何完成的here。
谢谢。我确实检查过了。但在我的情况下不起作用。

标签： extjs checkbox click tabpanel

【解决方案1】：

输入框被选中，然而标签面板事件处理程序在处理点击事件后重绘标题。您需要为 TabPanel 修改单击 事件处理程序，以便 更改标题 正在绘制，虽然有点乱你可以做点什么像这样：

findTargets: function (e) {
    var item = null,
        itemEl = e.getTarget('li:not(.x-tab-edge)', this.strip),
        input = e.getTarget('input');

    if (itemEl) {
        item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
        if (input) {
            var inputEl = Ext.get(input),
                isChecked = inputEl.getAttribute('checked');
            if (isChecked) {
                item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
                item.setTitle(item.title);
            } else {
                inputEl.dom.setAttribute('checked', 'checked');
            }
        }

        if (item.disabled) {
            return {
                close: null,
                item: null,
                el: null
            };
        }
    }
    return {
        close: e.getTarget('.x-tab-strip-close', this.strip),
        item: item,
        el: itemEl
    };
}

Here's a working sample 基于你的代码，希望对解决你的问题有所帮助。

【讨论】：

【解决方案2】：

    var tabContainer = tabPanel.getAt(0);
    var customTitle = "hello";

    tabContainer.tab.on('click', function(el,event) {

      var target = event.target;
      if( target.type == "checkbox" ) {

        // If checkbox has just been checked
        if( event.target.checked ) {
          tabContainer.setTitle( '<input type="checkbox" checked />' + customTitle );
          tabContainer.checked = true;
        // If checkbox has just been unchecked
        } else {
          tabContainer.setTitle( '<input type="checkbox" />' + customTitle );
          tabContainer.checked = false;
        }
      }
    });

【讨论】：