前面一直很忙,忙了快有一年了,学习了很多东西,也没有系统的整理一下,现在开始逐渐的将自己的一些学习的心得一点一点的记录下来。
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的时候就会进行页面切换。
分享到:
相关推荐
sencha-touch下载
sencha-touch-2.3.1-gpl.zip
sencha touch完整包(试用版)中的grid代码,位置在 touch-2.3.n > packages > sencha-touch-grid 使用时放到 ../MyApp/packages下 TouchGrid gives you a grid feature to arrange information in rows and columns...
sencha-touch demo里面包含着基本常用的 phonegap-1.2.0.js index.html sencha-touch.css sencha-touch-all.js 等常用文件
sencha-touch手机平板开发
官方sencha-touch最新版本2.0.0(附文档和实例),喜欢移动web开发的童鞋快来下载吧,免费噢,一起交流!!
sencha-touch 移动开发sencha-touch 移动开发sencha-touch 移动开发
Sencha Touch是移动HTML5开发框架,构建用于iPhone、Android 和Window Phone等跨平台的移动应用程序.
sencha-touch-2.1.0-gpl.zip 官网下载的,欢迎下载
sencha-touch-2.0 jar包,基于html5新技术,extjs的发展,可在移动设备上浏览实现iphone效果的服务端技术
sencha-touch-2.1.0-gpl
sencha-touch-2.0.0-commercial
sencha-touch grid 最新的代码
sencha-touch + cordova(PhoneGap)使用adt-eclipse打包实例
sencha-touch 1.0 所有文档 sencha-touch 2.0 API(docs说明) 案例
sencha-touch-2.0.0-commercial
sencha-touch-2.0.0-pr1.zip
sencha-touch-2-b3
sencha-touch-2.3.1a-gpl
关于js框架sencha-touch2.0的一个记事本的小例子。