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

即可