How to properly activate an MVC View in Sencha Touch V2

Question

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.

score 5 · Accepted Answer · answered Oct 19 '11 at 11:57

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:

Folder structure for Sencha Touch 2 application

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.

This is good, seems like the alias bit is what did it... am I right? — Chase Florell, Oct 19 '11 at 22:05
What if you are using a specific file structure? IE: Your user visits http://mysite.com/app/ but the actual files are located in http://mysite.com/plugin/senchatouch/app/. Is there anyway to rewrite where the views are found? — Tom, Feb 21 '12 at 15:13
@Tom, Refer the doc: http://docs.sencha.com/touch/2-0/#!/api/Ext.Loader-method-setPath .. you should be able to specify your folder location — Abdel Raoof Olakara, Feb 21 '12 at 16:38

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Great answer by Abdel.

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

edited May 23 '17 at 11:56

Community

1
1

answered Feb 12 '12 at 07:51

Grgur

7,092
2
19
34

How to properly activate an MVC View in Sencha Touch V2

2 Answers2

Linked