How to properly activate an MVC View in Sencha Touch V2

问题

I'm running Sencha Touch V2 beta and I'm looking at the most recent documentation.

I've followed the Ext.application instructions and am trying to properly lay out my MVC application. Unfortunately I can't figure out how to actually load up a View with this approach.

index.js

Ext.application({

    name: 'rpc',
    defaultUrl: 'home/index',
    controllers: ['home'], //note: define controllers here
    launch: function () {

        console.log('Ext.application ~ launch'),

        Ext.create('Ext.TabPanel', {
            id: 'rpc-rootPanel',
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [{
                title: 'Home',
                iconCls: 'home'
            }]
        });

        Ext.create('Ext.viewport.Viewport', {
            id:'rpc-rootPanel',
            fullscreen: true,
            layout: 'card',
            cardSwitchAnimation: 'slide'
        });

    }
});

homeController.js

Ext.define('rpc.controller.home', {
    extend: 'Ext.app.Controller',
    views: ['home.index'],
    stores: [],
    refs: [],
    init: function () {
        console.log('rpc.controller.home ~ init');
    },

    index: function () {
        console.log('rpc.controller.home ~ index');
    }
});

indexView.js

Ext.define('rpc.view.home.index', {
    extend: 'Ext.Panel',
    id: 'rpc-view-home-index',
    config: {
        fullscreen: true,
        layout: 'vbox',
        items: [{
            xtype: 'button',
            text: 'Videos',
            handler: function () {
            }
        }],
        html:'test'
    }
});

Any help you might be able to offer would be greatly appreciated.

回答1:

The new release follows MVC concepts introduced in ExtJS 4. You should read Architecture guide because Sencha Touch will be following the same arch.Here is my folder structure:

During development of your application, you should make use of sencha-touch-all-debug-w-comments.js in your html. This helps in debugging your application.

Here is the application class:

Ext.Loader.setConfig({enabled: true});
Ext.application({
    name: 'rpc',
    appFolder: 'app',           
    controllers: ['Home'],
    launch: function () {

        Ext.create('Ext.tab.Panel',{
            fullscreen: true,           
            tabBarPosition: 'bottom',
            items:[{
                title: 'Home',
                iconCls: 'home',
                html: '<img src="http://staging.sencha.com/img/sencha.png" />'
            },{
                title: 'Compose',
                iconCls: 'compose',
                xtype: 'homepage'
            }]          
        });     
    }
});

Note, how I have included the homepage view using the alias (xtype: 'homepage').

Here is the controller:

Ext.define('rpc.controller.Home', {
    extend: 'Ext.app.Controller',
    views: ['home.HomePage'],
    init: function() {    

        console.log('Home controller init method...');
    }    
});

And finally, my Homepage view:

Ext.define('rpc.view.home.HomePage', {
    extend: 'Ext.Panel',    
    alias: 'widget.homepage',
    config: {               
        html: '<img src="http://staging.sencha.com/img/sencha.png" />'
    },
    initialize: function() {
        console.log("InitComponent for homepage");      
        this.callParent();  
    }       
});

The alias property is used to instantiate instance of the class when needed. You could also use the Ext.create method.

I hope this will help you get started with Sencha Touch.

回答2:

Great answer by Abdel.

You can also do it though profiles, as demonstrated in this answer: Sencha Touch 2.0 MVC tutorial

来源：https://stackoverflow.com/questions/7815905/how-to-properly-activate-an-mvc-view-in-sencha-touch-v2