Sencha Touch MVC 模式

首先你要生成Sencha touch環境

而後再這個項目中建立文件

Models/模型層：

建立文件路徑：app/model/Station.js

//定義實體類  
Ext.define('HelloWorld.model.Station', {
    extend: 'Ext.data.Model',  
    fields: ['id', 'name'],  
    proxy: {  
        type: 'ajax',  
        url: 'data/stations.json',  
        reader: {  
            type: 'json',  
            root: 'results'   
        }  
    }  
});

Stores/存儲層：

建立文件路徑：app/store/Stations.js

//定義store 
Ext.define('HelloWorld.store.Stations', {
    extend: 'Ext.data.Store',  
    requires: 'HelloWorld.model.Station',  
    model: 'HelloWorld.model.Station',  
    autoLoad: true  
});

Controllers/控制層：

建立文件路徑：app/controller/Home.js

//控制層,  
Ext.define('HelloWorld.controller.Home', {  
    extend: 'Ext.app.Controller',     
    views: ['Home', 'SimpleList'],//聲明該控制層要用到的view  
    stores: ['Stations'], //聲明該控制層要用到的store  
  
    refs: [{   //映射,這樣就能夠在控制層方便的經過geter取得相應的對象了  
            selector: 'carousel > panel > #bottomInput',  
            ref: 'bottomField'  
            },  
            {  
            selector: 'carousel > list',   
            ref: 'stationList'  
            }  
    ],  
    init: function() {  
        console.log('Init home controller');  
        // Start listening for events on views  
        //這裏的this至關於這個控制層  
        this.control({  
            // example of listening to *all* button taps  
            'button': { 'tap': function () {  
                        console.log('Every button says Hello world');  
                    }   
                },  
            // Example of listening by an explicit id  
            '#firstButton': { 'tap': function () {  
                        console.log('Only the button with id=firstButton says Hello');  
                        alert(this.getBottomField().getValue());  
                    }   
                }             
        });  
    },  
  
    onLaunch: function() {  
        console.log('onLaunch home controller');  
        // The "getter" here was generated by specifying the   
        // stores array (above)  
        var stationsStore = this.getStationsStore();    
          
        stationsStore.load({  
            callback: this.onStationsLoad,  
            scope: this  
        });  
    },  
      
    onStationsLoad: function() {  
        console.log('onStationsLoad home controller');  
        // get a reference to the view component  
        var stationsList = this.getStationList();  
        // do something  
    },  
      
    onStationSelect: function(selModel, selection) {  
        // Fire an application wide event  
        this.application.fireEvent('stationstart', selection[0]);  
    },  
      
});

Views/視圖層：

建立文件路徑：app/view/SimpleList.js

//view 層 不復雜  
Ext.define('HelloWorld.view.SimpleList', {  
    extend: 'Ext.Panel',      
    alias: 'widget.simplelist',  
    layout: 'vbox',  
    config : {  
        items: [      
        { xtype: 'list',   
            layout: 'fit', //fullscreen: true,   
            height: '200',  
            store: 'Stations',  
            itemTpl: '{id} :: {name}'  
            }  
        ]         
    },   
    initialize: function() {  
        console.log('initialize simplelist view');        
        this.callParent();  
    }  
});

配置：

文件路徑：app.js

Ext.Loader.setConfig({ enabled: true }); //開啓動態加載  
  
Ext.require([      
    'Ext.XTemplate',  
    'Ext.Panel',  
    'Ext.Button',  
    'Ext.List'  
]);  
  
// Main application entry point  
Ext.application({  
    phoneStartupScreen: 'images/sencha_logo.png',  
    name: 'HelloWorld',  //命名空間   
    // the controller will take care of creating the view          
    controllers: ['Home'],  //聲明所用到的控制層  
    // You could delete this, here only to illustrate  
    // the sequence of events         
    initialize: function () {  //初始化  
        console.log('app initialize');  
        this.callParent();  
    },    
    launch: function() {       //開始          
        console.log('app launch');  
        var carousel = Ext.create('Ext.Carousel', {  
            fullscreen: true,  
            // clean instantiation using the widget.alias's defined  
            // in each view  
            items: [  
                { xtype: 'home' },  
                { xtype: 'simplelist' }                  
            ]  
        });  
    }  
});