手把手教你用sencha touch 开发手机应用界面切换

这一节我们就来简单的介绍下界面切换

细心的亲们应该可以看出来，我这里用的界面切换所用到的是card布局

简单的说，我个人理解来说card布局就像一个装有很多牌的盒子，把你所要的界面全部预存到自己的盒子（Container因为我项目中用到的是Container）中，当你需要看某张牌的时候去调用它的setActiveItem()方法就行（想详细了解的亲可以去好好看看API）

废话不多说，我们一步步看

因为st运行我们的项目的时候，程序在加载完成之后就会进入app.js文件，我们先看项目中的app.js的代码

这段代码的意思是销毁初始化的加载样式，进入主控制界面，然后沿着顺序，我们找到xtype:‘entryview’组建

额，没错，你会在app/entry/viewport.js中找到它

其代码如下：

[javascript]  view plain copy print ?

1. /** 
2.  * 程序入口类 
3.  */  
4. Ext.define("Entry.Viewport", {  
5.     extend: "Ext.Container",  
6.     xtype: 'entryview',  
7.     id: 'entryview',  
8.     config: {  
9.         layout: 'card',  
10.         autoDestroy:false,  
11.         items: [{  
12.             xtype:'mainpanel'  
13.         },{  
14.             xtype:'secondpanel'  
15.         }]  
16.     }  
17. });  

不难看出在entryview组件里面有2个xtype,在我的程序中它们分别代表的是2个界面

也就是说我们在程序里已经把2个界面预存到了card布局的继承自container的组件entryview中了

接下来的，我们要做的是在两个界面之间的切换；

打开你的浏览器，输入你的离线的本地API或者官网的API地址，搜索container，看看他的Methods

你会发现在众多的方法中有一个叫setActiveItem()，如图,它将是我们切换界面的关键，没错，用这个方法你就可以设置自己程序指向的当前显示的页了，就是这么简单。。。

下面做代码演示：

第一个节目mainpanel的代码：

[javascript]  view plain copy print ?

1. Ext.define('Main.view.Main',{  
2.     extend:'Ext.Container',  
3.     xtype:'mainpanel',  
4.     config:{  
5.         layout:'fit',  
6.         items:[{  
7.             xtype:'titlebar',  
8.             docked: 'top',  
9.             title: '仅为演示',  
10.             items: [  
11.                 {  
12.                     iconCls: 'list',  
13.                     align: 'left'  
14.                 },  
15.                 {  
16.                     iconCls: 'arrow_right',  
17.                     action:'nextpage',  
18.                     align: 'right'  
19.                 }  
20.             ]  
21.         },{  
22.             xtype:'container',  
23.             html:'这里是首页'  
24.         }]  
25.     }  
26. });  

其对应的controller代码：

[javascript]  view plain copy print ?

1. Ext.define('Main.controller.Main', {  
2.     extend: 'Ext.app.Controller',  
3.     config: {  
4.         refs:{  
5.             //找到id为entryview也就是我们的主view其在本控制类中用entryView代替引用  
6.             entryView: '#entryview',  
7.             //找到xtype:'mainpanel',多余就不说了  
8.             mainView: 'mainpanel',  
9.             //找到secondpanel  
10.             //secondView:'secondpanel'  
11.             //如果上面那种方式没找到secondpanel，不用担心，直接注掉,换种方式  
12.             secondView:{  
13.                 xtype: 'secondpanel',  
14.                 selector: 'secondpanel',  
15.                 autoCreate: true  
16.             }  
17.         },  
18.         control: {  
19.             //mainpanel的action:'nextpage'的按钮的点击事件  
20.             'mainpanel button[action = nextpage]':{  
21.                 tap:'nextPageFn'  
22.             }  
23.         }  
24.     },  
25.     /** 
26.      * button的tap事件 
27.      */  
28.     nextPageFn:function(){  
29.         //第一步,找到主组件entryview,看config的refs的第一个，  
30.         var me = this,  
31.             //this在方法的方法体内部的不同区域可能会出现表示不同的对象，所以优先给其赋值给别个变量  
32.             entry = me.getEntryView();//这样就找到了主组件，  
33.             //这里值得说明一下的就是很多js初学者，包括本人也是，经常犯的是一个低级错误  
34.             //在js中如果 var a = 0 ; b =1;//这个时候a是局部变量，b是全局变量  
35.             //而var a = 0 ,b = 0;此时a，b 都是局部变量,在js中全局变量能免则免  
36.             //题外话不多说，大家注意就是  
37.             //然后我们还需要找到我们要跳转的界面  
38.             second = me.getSecondView();//大家注意看，声明变量结束了，要用“;”结束了，st引用别的界面就这么简单  
39.             //然后就是跳转方法  
40.             entry.setActiveItem(second);  
41.             //好了，去界面试试，你会发现，没错，换界面了  
42.     }  
43. });  

第二个节界面secondpanel的代码

[javascript]  view plain copy print ?

1. /** 
2.  * 程序第二个界面 
3.  */  
4. Ext.define("Second.view.Second", {  
5.     extend: "Ext.Container",  
6.     xtype: 'secondpanel',  
7.     config: {  
8.         layout: 'fit',  
9.         //显示的效果  
10.         showAnimation: {  
11.            type: 'slide',  
12.            direction: 'left',  
13.            cover: true  
14.         },  
15.         //影藏的效果  
16.         hideAnimation: {  
17.            type: 'slide',  
18.            direction: 'right',  
19.            cover: true  
20.         },  
21.         items: [{  
22.             xtype:'titlebar',  
23.             docked:'top',  
24.             title:'第二个界面',  
25.             items:[{  
26.                 ui:'back',  
27.                 align: 'left',  
28.                 text:'返回',  
29.                 action:'back'  
30.             }]  
31.         }],  
32.         html:'这是演示的第二个界面'  
33.     }  
34. });  

其对应的controller代码如下：

[javascript]  view plain copy print ?

1. Ext.define('Second.controller.Second', {  
2.     extend: 'Ext.app.Controller',  
3.     config: {  
4.         refs:{  
5.             entryView: '#entryview',  
6.             mainView: 'mainpanel',  
7.             secondView:'secondpanel'  
8.         },  
9.         control: {  
10.             'secondpanel button[action = back]':{  
11.                 tap:'backFn'  
12.             }  
13.         }  
14.     },  
15.     /** 
16.      * 返回方法 
17.      * 注释我就不多写了，跟前面那个一样 
18.      */  
19.     backFn:function(){  
20.         var me = this,  
21.             entry = me.getEntryView(),  
22.             main = me.getMainView();  
23.         entry.setActiveItem(main);  
24.     }  
25. });  

OK，代码就是这样，通过如此，程序就可以在两个界面间切换

如图：

界面切换就这样完成了，当然，很多亲不禁会问，那我换页需要参数怎么办，额，这个问题我只想说，你界面都能随意找到，何况参数呢。

额，就是这么简单，顺便说下，很多亲都选择路由做界面切换，额，做这个东西将近1年了，对应现在的我对路由是什么都没有一个清晰的概念，我只想说，这个完全可以满足你的需求，何必用简单的事情复杂的做呢，当然，非常厉害的会使用路由的亲可以继续使用。方法是多样的。