一般的APP，页面的基本布局都是一样的，下面是几个tab，用来进行选择以达到页面切换的作用。点击不同的按钮，界面就会切换到不同的内容。Sencha Touch中可以很容易的进行这样的操作。
首先，我们要确定我们在这里要使用TabPanel组建。顾名思义，该组件在界面的下方添加tab并且可以通过tab进行页面切换。基础代码如下：
&nbs p;
launch:function(){ Ext.Viewport.add({ Xty PE :’tabpanel’,//选择tabpanel作为主面板 tabBarPos IT ion:’bottom’，//该属性设定tab的位置 items:[ //定义页面主题内容 { title:’Home’, iconCls:’home’, cls:’home’, ht ML :[//这里写html页面主题部分代码].join([]) }, //……] }); } 我们来思考一下Sencha Touch中该组件的特点，定义了该组件后，可以通过tabBarPosition来设定tab所在的位置。一般情况下都在底部。接下来，我们可以通过items来定义TabPanel中所包含的内容。每定义一个items，其实不止定义了tab按钮的内容，也定义了它对应的页面的内容。
以上面的代码 为例 ，我们现在定义了一个title为Home的tab，同时还为它设定了icon。其中的html属性里面的内容，写的就是tab页面内的内容。可以直接使用 正常 的html代码编写，也可以附带 CSS 样式等。它和tab这个对应的按钮是绑定在一起的。通过这种方法我们可以定义多个tab界面，也就组成了整个app的基本框架。
在正常的开发中，为了让开发的过程更加清晰 简单 ，我们可以一个一个界面来写，最后再把它们加到一个界面中，实现我们想要的效果。
一般的APP，页面的基本布局都是一样的，下面是几个tab，用来进行选择以达到页面切换的作用。点击不同的按钮，界面就会切换到不同的内容。Sencha Touch中可以很容易的进行这样的操作。
首先，我们要确定我们在这里要使用TabPanel组建。顾名思义，该组件在界面的下方添加tab并且可以通过tab进行页面切换。基础代码如下：
launch:function(){ Ext.Viewport.add({ Xtype:’tabpanel’,//选择tabpanel作为主面板 tabBarPosition:’bottom’，//该属性设定tab的位置 items:[ //定义页面主题内容 { title:’Home’, iconCls:’home’, cls:’home’, html:[//这里写html页面主题部分代码].join([]) }, //……] }); } 我们来思考一下Sencha Touch中该组件的特点，定义了该组件后，可以通过tabBarPosition来设定tab所在的位置。一般情况下都在底部。接下来，我们可以通过items来定义TabPanel中所包含的内容。每定义一个items，其实不止定义了tab按钮的内容，也定义了它对应的页面的内容。
以上面的代码为例，我们现在定义了一个title为Home的tab，同时还为它设定了icon。其中的html属性里面的内容，写的就是tab页面内的内容。可以直接使用正常的html代码编写，也可以附带CSS样式等。它和tab这个对应的按钮是绑定在一起的。通过这种方法我们可以定义多个tab界面，也就组成了整个app的基本框架。
在正常的开发中，为了让开发的过程更加清晰简单，我们可以一个一个界面来写，最后再把它们加到一个界面中，实现我们想要的效果。
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5开发实战――Sencha Touch篇(2) 全部内容，希望文章能够帮你解决 html5教程-HTML5开发实战――Sencha Touch篇(2) 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5开发实战――Sencha Touch篇(2)的详细内容...