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

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

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

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

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

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



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

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

其代码如下：

[javascript] view
plaincopyprint?





/**

* 程序入口类

*/

Ext.define("Entry.Viewport", {

extend: "Ext.Container",

xtype: 'entryview',

id: 'entryview',

config: {

layout: 'card',

autoDestroy:false,

items: [{

xtype:'mainpanel'

},{

xtype:'secondpanel'

}]

}

});

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

也就是说我们在程序里已经把2个界面预存到了card布局的继承自container的组件entryview中了
接下来的，我们要做的是在两个界面之间的切换；

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

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



下面做代码演示：

第一个节目mainpanel的代码：

[javascript] view
plaincopyprint?





Ext.define('Main.view.Main',{

extend:'Ext.Container',

xtype:'mainpanel',

config:{

layout:'fit',

items:[{

xtype:'titlebar',

docked: 'top',

title: '仅为演示',

items: [

{

iconCls: 'list',

align: 'left'

},

{

iconCls: 'arrow_right',

action:'nextpage',

align: 'right'

}

]

},{

xtype:'container',

html:'这里是首页'

}]

}

});

其对应的controller代码：

[javascript] view
plaincopyprint?





Ext.define('Main.controller.Main', {

extend: 'Ext.app.Controller',

config: {

refs:{

//找到id为entryview也就是我们的主view其在本控制类中用entryView代替引用

entryView: '#entryview',

//找到xtype:'mainpanel',多余就不说了

mainView: 'mainpanel',

//找到secondpanel

//secondView:'secondpanel'

//如果上面那种方式没找到secondpanel，不用担心，直接注掉,换种方式

secondView:{

xtype: 'secondpanel',

selector: 'secondpanel',

autoCreate: true

}

},

control: {

//mainpanel的action:'nextpage'的按钮的点击事件

'mainpanel button[action = nextpage]':{

tap:'nextPageFn'

}

}

},

/**

* button的tap事件

*/

nextPageFn:function(){

//第一步,找到主组件entryview,看config的refs的第一个，

var me = this,

//this在方法的方法体内部的不同区域可能会出现表示不同的对象，所以优先给其赋值给别个变量

entry = me.getEntryView();//这样就找到了主组件，

//这里值得说明一下的就是很多js初学者，包括本人也是，经常犯的是一个低级错误

//在js中如果 var a = 0 ; b =1;//这个时候a是局部变量，b是全局变量

//而var a = 0 ,b = 0;此时a，b 都是局部变量,在js中全局变量能免则免

//题外话不多说，大家注意就是

//然后我们还需要找到我们要跳转的界面

second = me.getSecondView();//大家注意看，声明变量结束了，要用“;”结束了，st引用别的界面就这么简单

//然后就是跳转方法

entry.setActiveItem(second);

//好了，去界面试试，你会发现，没错，换界面了

}

});

第二个节界面secondpanel的代码

[javascript] view
plaincopyprint?





/**

* 程序第二个界面

*/

Ext.define("Second.view.Second", {

extend: "Ext.Container",

xtype: 'secondpanel',

config: {

layout: 'fit',

//显示的效果

showAnimation: {

type: 'slide',

direction: 'left',

cover: true

},

//影藏的效果

hideAnimation: {

type: 'slide',

direction: 'right',

cover: true

},

items: [{

xtype:'titlebar',

docked:'top',

title:'第二个界面',

items:[{

ui:'back',

align: 'left',

text:'返回',

action:'back'

}]

}],

html:'这是演示的第二个界面'

}

});

其对应的controller代码如下：

[javascript] view
plaincopyprint?





Ext.define('Second.controller.Second', {

extend: 'Ext.app.Controller',

config: {

refs:{

entryView: '#entryview',

mainView: 'mainpanel',

secondView:'secondpanel'

},

control: {

'secondpanel button[action = back]':{

tap:'backFn'

}

}

},

/**

* 返回方法

* 注释我就不多写了，跟前面那个一样

*/

backFn:function(){

var me = this,

entry = me.getEntryView(),

main = me.getMainView();

entry.setActiveItem(main);

}

});

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

如图：





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

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