Sencha-touch之TabPanel的Tab在点击时实施事件
2013-03-16 13:40
549 查看
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的时候就会进行页面切换。
在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的时候就会进行页面切换。
相关文章推荐
- Sencha Touch 给 Panel 注册点击事件(tap)和其他touchstart,touchend 等事件
- senchatouch tabPanel 在面板跳转时执行自定义函数 handler()
- Sencha Touch中TabPanel组件的使用
- senchatouch之tab事件经常无法响应的问题解决方案
- sencha touch NavigationView 嵌套 TabPanel 的问题
- sencha touch的tabpanel里tab比较多时,使tab子标签滚动
- sencha touch之panel和tabpanel
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- sencha 为panel 注册点击事件
- Sencha Touch中TabPanel组件的使用(转)
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)
- [Sencha Touch/ExtJS] (函数节流)阻止用户快速频繁点击,导致多次触发点击事件
- sencha-touch开发的一些tips(tabPanel,提示框,store数据修改)
- sencha touch 2 tabpanel中List的不显示问题,解决方案
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- Sencha touch 开发系列:容器组件:tabpanel,carousels