Sencha Touch MVC 模式

摘要: Sencha Touch MVC 模式 初学者代码 第一步 hello world开始学习。

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