Sencha Touch MVC 模式

2019独角兽企业重金招聘Python工程师标准>>>

首先你要生成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' }                  
            ]  
        });  
    }  
});

转载于:https://my.oschina.net/u/1582223/blog/215823