Extjs: in TabPanel, how to put a checkbox in each tab's header?

Question

it seems very straight forward, but after a lot of tries and online searching, still no luck with it.

environment: ExtJS 3.4

here is a jsfiddle I am working on: http://jsfiddle.net/v4ZzT/8/

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

but that checkbox doesn't respond to click.

also found this link on sencha forum: http://www.sencha.com/forum/showthread.php?114794-Checkbox-in-tab-header it recommends changing iconCls. but I couldn't find a way to detect if this icon is clicked or not.

Answer 1

The input box gets checked, however the tab panel event handler redraws the title after handling the click event. You will need to modify the click event handler for the TabPanel in order to change the title being drawn, although a little messy you can do something like this:

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 based on your code, hope it helps to solve your problem.

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