tabpanel加checkbox的问题

各位大虾，小弟想在tabpanel的tab的标题上，也就是title属性显示的地方添加个单选框，单击可以切换选中/不选中状态，试了很多方法都没能凑效，急寻解决方案，谢谢~~~

1. 
   
2. Ext.onReady(function(){
   
3.    
   
4.     var itemsTpl = new Ext.Template(
   
5.          '<li class="{cls}" id="{id}" width="240px"><a class="x-tab-strip-close" onclick="return false;"></a>',
   
6.          '<a class="x-tab-right" href="#" onclick="return false;"><a class="header-uncheck" onclick="return false;"></a><em class="x-tab-left">',
   
7.          '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
   
8.          '</em></a></li>'
   
9.     );
   
10.    
    
11.     itemsTpl.disableFormats = true;
    
12.     itemsTpl.compile();
    
13. 
    
14.     var tabs = new Ext.TabPanel({
    
15.         tabWidth : 200,
    
16.         activeTab : 0,
    
17.         title : "123",
    
18.         items : [new Ext.Panel({title : "hahaha---" , html : "--++-00"}),new Ext.Panel({title : "123" , html : "xixi"})],
    
19.         width : 600,
    
20.         height : 500,
    
21.         itemTpl : itemsTpl ,
    
22.         checkElClick : function(tab , checkEl){
    
23.             if(!checkEl.hasClass("header-check")){
    
24.                 checkEl.addClass("header-check");
    
25.             }else{
    
26.                 checkEl.removeClass("header-check");
    
27.             }
    
28.             this.fireEvent("headercheck" , this , tab , checkEl.hasClass("header-check") , checkEl);
    
29.         }
    
30.     });
    
31.    
    
32.     tabs.on("render" , function(){
    
33.         tabs.items.each(function(tab){
    
34.             var checkEl = Ext.get(tabs.getTabEl(tab)).child(".header-uncheck");
    
35.             checkEl.on("click" , this.checkElClick.createDelegate(this,[tab,checkEl]));
    
36.         },this);
    
37.     },tabs);
    
38.    
    
39.     tabs.render(Ext.getBody());
    
40.    
    
41.    
    
42. });
    
43. 
    
44. 
    
45. 
    
46. 
    
47. ------------------------------css样式-----------------------------------
    
48. .header-uncheck{
    
49.     background-image:url(../../ext/resources/images/default/form/radio.gif);
    
50.     width:12px;
    
51.     font-size:11px;
    
52.     float:left;
    
53. }
    
54. 
    
55. .header-check{
    
56.     background-position:0 13px;
    
57. }

复制代码

-
内容开始
感觉不符合常理!EXTJS中好像没有这样的设计，jqUI中TAB到是好实现，因为都是底层，建议改变一下方式，实现你的业务目的！