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',

即可