sencha 2.0 mvc框架中如何切换页面(switch view)

Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。

效果如下：



点击button后，右方页面跳转，如下图：



至于如何实现：

1.首先，请使用sencha论坛管理员201212月放出的mvc框架

下载地址：http://www.sencha.com/forum/showthread.php?162016-Simple-MVC-example

2.然后在view文件夹中新建两个view，代码如下：

Ext.define('MVCTest.view.List', {
extend : 'Ext.Panel',
xtype  : 'mvctest-list',

config : {
//        itemTpl          : '{name}',
//        onItemDisclosure : function() {}                //In PR3, this doesn't take a bool value, it will on next release

items:[{
xtype:'button',
id:'btn',
text:'dfdsf'

}]

}

//    constructor : function(config) {
//        Ext.apply(config, {
//            store : Ext.create('MVCTest.store.Pages')   //I don't like using storeId (or any other id) so I create the store class

});

Ext.define('MVCTest.view.Page', {
extend : 'Ext.Panel',
xtype  : 'mvctest-page',

config : {
//        cls : 'page-detail',
//        tpl : '<div class="name">{name}</div><div class="content">{content}</div><div class="image-detail"><img src="{image}" /></div>'

html:'<p>nb了lz</p>'
}
});

3.将其中一个页面写入viewport页面之中

Ext.define('MVCTest.view.Viewport', {
extend : 'Ext.Container',
xtype  : 'mvctest-viewport',

config : {
fullscreen : true,
layout     : 'card',
items      : [
{
xtype        : 'toolbar',
docked       : 'top',
//title        : 'Title',
defaultTitle : 'Title',
items        : [
{
text   : 'Back',
ui     : 'back',
hidden : true
}
]
},
/**
* Here you can specify any items on the bottom toolbar
*/
{
// xtype  : 'toolbar',
// docked : 'bottom',
// title  : 'Bottom'
width:400,
xtype : 'navigatorPanel',
docked:'left'

},
{
xtype : 'mvctest-listwrap'
}
]
}
});

4.在controller端对button的函数进行设定：

'mvctest-list #btn':{
tap:function(){
var me         = this,
//list       = me.getPageList(),
viewport   = me.getViewport(),
//topToolbar = viewport.down('toolbar[docked=top]'),
newCard    = viewport.add({
xtype : 'mvctest-page',
//data  : record.data
});

//list.deselect(record);

viewport.setActiveItem(newCard);

//topToolbar.setTitle(record.get('name'));
}
}

5.如此，对于没有docked属性的item项，sencha会默认为1.1中的dockeditem项，这样便可以只切换item项而不惊动原有的dockeditem项。

6.如果是tabpanel的切换的话，用上述方法可能会报错：“Adding a card to a tab container without specifying any tab configuration”，不用急那是缺少tab配置项的问题，加入

title: 'Tab 1',
//html: '1',
//cls: 'card1',
iconCls: 'bookmarks',

即可