Question

看起来非常直接，但经过大量的尝试和在线搜索后，仍然没有运气。

环境： 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。但我无法找到一种方法来检测是否点击了这个图标。

Answer 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根据您的代码，希望它有助于解决您的问题。

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

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

2 个答案: