model 层:
//定义实体类
Ext.define('HelloWorld.model.Station', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
proxy: {
type: 'ajax',
url: 'data/stations.json',
reader: {
type: 'json',
root: 'results'
}
}
});
Ext.define('HelloWorld.store.Stations', { //定义store
extend: 'Ext.data.Store',
requires: 'HelloWorld.model.Station',
model: 'HelloWorld.model.Station',
autoLoad: true
});
控制层:
//控制层,
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]);
},
});
//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();
}
});
配置
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' }
]
});
}
});
看的老外的demo !
分享到:
相关推荐
sencha touch mvc Demo!
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
最近在学习sencha touch;走了不少弯路。我从这个sencha touch mvc框架中获益匪浅;发出来跟大家共享。直接用chrome和safari打开index.html;ie和firefox不支持。希望对大家有用
sencha touch camera MVC模式, ST开发的调用相机插件功能,里面包含源码和编译好的APK,可以正常跑在Android手机上,且能调用相机拍照功能,MVC模式开发的
NULL 博文链接:https://czpae86.iteye.com/blog/1720446
Sencha Touch 2入门教程之MVC例子程序源代码 用Sencha Touch 2 之MVC模式写的一个登录界面的例子
sencha-touch2 mvc简单的示例以及一些基础控件使用demo,使用支持html5的浏览器打开
Sencha Touch 2 MVC Demo 本地Json访问数据
《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...
当我们准备开发一个新的移动应用项目时,首先应该考虑的是选型问题,究竟是本地(Native)应用、混用(Hybrid)应用还是Web App?虽然这三种方案各有优劣,但Web App因其独特的优势...自定义组件和MVC模式的应用开发。
14章 样式与主题 15章 创建自定义组件与MVC模式应用
利用sencha touch 2.0 开发的 车辆管理系统 利用了 mvc 模式 登陆名 13000000000 是一个 很适合 sencha touch 移动开发的 例子
Sencha touch基于MVC架构的最基础入门程序,只包括包括用户登陆和增删改功能。后台使用.net,登陆账号密码都是a。自己练习时写的,比较适合刚接触sencha touch的人入门参考。
SenchaTouch通过使用Ext.Ajax.request请求C#的ashx后台处理文件,获取返回数据(附代码),以及senchatouch的AJAX框架和MVC框架的简介
Sencha Touch手机移动开发的入门级教程,主要讲解ST2开发环境的搭建和ExtJS组件的使用及MVC下App的开发。
Spring Roo 插件有助于为 CRUD 操作创建客户端 Sencha Touch MVC 代码! 关于 Spring Roo:这是服务器端 Web 应用程序开发工具。 通常用于启动使用 Spring Framework 的项目。 Spring Roo 可以非常轻松地生成基于 ...
本文介绍了用Sencha Touch2框架开发一个手机记事本Notes App的案例。通过该教程,读者可以掌握Sencha Touch的MVC架构,了解Sencha Touch2的核心类概念和使用方法。
Sench touch 2 mvc watchlist example