Sencha-touch之TabPanel的Tab在点击时执行事件
前面一直很忙，忙了快有一年了，学习了很多东西，也没有系统的整理一下，现在开始逐渐的将自己的一些学习的心得一点一点的记录下来。
?
Sencha-touch的前身是ExtJs，前几年我一直在做ExtJs的方面的扩展开发，现在由于自己的项目，做移动端的跨平台开发，因此用到了Sencha-touch。
?
Sencha-touch中TabPanel的使用频率应该是很高的了，一般的应用应该都会用到，但是TabPanel的TabBar在点击时，就会切换到对应的容器界面去，而经常会有这种情况，在TabBar中其实只是需要4个容器，而在TabBar上需要一个按钮，让其被点击时执行某个方法，而并不是切换到某个界面下去，在1.1的版本中，是可以给TabBar添加item来实现的，不过那也是存在Bug的，而在2的版本中，这样是无法实现的，为了实现这个功能，需要修改一点源码。
?
在TabPanel的源码中修改doTabChange方法，原本的doTabChange方法的源码是：
?
?
doTabChange: function(tabBar, newTab, oldTab) {
? ? ? ? var index = tabBar.indexOf(newTab);
? ? ? ? this.setActiveItem(index);
}
?
?
在其中添加几行代码：修改成：
?
?
doTabChange: function(tabBar, newTab, oldTab) {
? ? ? ? var index = tabBar.indexOf(newTab);
? ? ? ? var item = this.getInnerItems()[index];
? ? ? ? if(item.handler){
if(typeof(item.handler)== 'string'){
? ? ? ? ? ? ? ? eval(item.handler);?
}else{
? ? ? ? ? ? item.handler();?
}
? ? ? ? return;
}
? ? ? ? this.setActiveItem(index);
}
?
?
如此修改后，在创建TabPanel时，如果需要某个Tab点击执行事件，只需要给该Tab一个handler属性，如：
?
Ext.create('Ext.tab.Panel',{
tabBar: {
docked: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
}
},
items: [{
title: '首页',
? ? ? ? ? ? iconCls: 'home'
},{
title: '好友',
iconCls: 'user',
handler: function(){
alert('==========');
}
},{
title: '信息',
iconCls: 'mail'
},{
iconCls: 'favorites',
title? : '战利品',
},{
iconCls: 'more',
title: '更多'
?}]
});
?
如此在点击好友这个Tab的时候会弹出=========的提示，而在点击其他Tab的时候就会进行页面切换。
