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