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.