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中,Model-View-Controller(MVC)模式是其核心架构,用于组织和管理应用程序的各个部分。本Demo将向我们展示如何利用Sencha Touch MVC实现一个功能完善的移动应用。 1. **Model**:在Sencha Touch中...
在这个“Sencha Touch 2 MVC Demo”中,我们很可能会找到一个完整的示例项目,展示了如何在Sencha Touch 2中运用MVC模式来构建应用。源码的分析将有助于深入理解框架的工作原理和最佳实践。 **MVC模式详解** 1. **...
最近在学习sencha touch;走了不少弯路。我从这个sencha touch mvc框架中获益匪浅;发出来跟大家共享。直接用chrome和safari打开index.html;ie和firefox不支持。希望对大家有用
在“Sencha Touch Camera MVC模式”中,我们将探讨如何在Sencha Touch中集成相机功能,并使用MVC模式进行开发。 1. **MVC模式**: MVC模式是一种软件设计模式,用于分离应用程序的数据逻辑、用户界面和业务逻辑。...
Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。...同时,这也是一个实践Sencha Touch MVC模式的好机会,有助于提升你在前端开发领域的专业技能。
本示例“sencha-touch2 mvc demo”是关于Sencha Touch 2 MVC架构的一个简单演示,它展示了如何在移动应用中有效地组织代码并利用MVC模式。MVC(Model-View-Controller)是一种流行的设计模式,用于分离应用程序的...
在Sencha Touch 2中,MVC模式被用来组织和管理应用的逻辑,提高代码的可维护性和可扩展性。 1. **模型(Model)**:模型层负责存储和管理应用程序的数据。在Sencha Touch 2中,你可以定义一个模型类来描述数据对象...
2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据模型(Model)来处理业务逻辑和数据存储。 3. **视图(Views)**:介绍各种UI组件,如按钮、列表、面板、表单等,以及如何...
总结来说,"Sencha Touch 2 MVC Demo 本地Json访问数据"这个示例旨在展示如何在Sencha Touch 2环境中,使用MVC模式和本地JSON数据构建移动应用。通过理解并实践这些知识点,开发者可以更好地理解和应用Sencha Touch ...
Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...
6. **MVC模式的应用**:Sencha Touch采用Model-View-Controller(MVC)架构,允许开发者将业务逻辑、视图和数据控制分离。在动态加载场景下,可以创建独立的MVC模块,根据需要动态引入。 在"DynamicMVC"这个文件夹...
Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...
《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...
同时,它采用 MVC(Model-View-Controller)架构模式,有助于保持代码组织有序,便于维护和扩展。此外,Sencha Touch还支持本地存储和离线应用,使Web应用能够在无网络连接的情况下依然可以运行一部分功能。 相比之...
关于源码,Sencha Touch 2基于MVC(Model-View-Controller)架构,它的源码组织清晰,方便理解和扩展。学习源码有助于深入理解其工作原理,从而更好地利用其特性。你可以在`app`目录下找到模型(model)、视图(view...
它的API设计遵循了MVC(模型-视图-控制器)模式,使得代码结构清晰,易于维护。 压缩包中的“touch-2.4.2”文件可能包含了以下内容: 1. 框架的核心库文件,如sencha-touch.js和sencha-touch.css,开发者可以直接在...
1. MVC模式:在软件工程中,MVC模式是一种广泛使用的架构模式,用于分离应用程序的数据模型、用户界面和控制逻辑。在Sencha Touch 2.0中,模型(Model)负责存储和管理数据;视图(View)处理用户界面元素和显示数据...