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.

Answer 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:

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.

Answer 2

Great answer by Abdel.

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

友情链接