从helloword开始,效果图如下:
[img][/img]
Sencha-Touch2.3.1学习——MVC示例
[img][/img]
MVC示例目录结构,如下:
[img][/img]
Sencha-Touch2.3.1学习——MVC示例
集成开发环境——sencha architect3
Sencha-Touch2.3.1学习——MVC示例
源码解析,如下:
// 控制器:MyController.js
Ext.define('mvc.controller.MyController', { // 定义一个类mvc.controller.MyController(参考:ClassManager.js)
extend: 'Ext.app.Controller', // 继承自Ext.app.Controlle
config: { // 配置信息(每个类都可以指定一个config配置信息)
refs: { // 定义视图的引用信息(是一个键值对)可以使用getXXX方式访问;
// 值会使用ComponentQuery选择器匹配;也可以使用{selector: 'xxx', xtype: 'xxx'}来选择;
detailPanel: 'mainview #detailPanel'
},
control: { // 配置信息
"mainview #runButton": {
tap: 'runAction' // 指定按钮单击事件的回调函数
}
}
},
runAction: function(target) { // 回调函数定义
// Create new model
var model = Ext.create('mvc.model.MyModel', { // 创建类mvc.model.MyModel
id: 123,
text: 'Hello World'
});
// Bind model to view
this.getDetailPanel().setRecord(model); // 获取上面定义的面板detailPanel,然后将模型设置到该视图上;
}
});
说明
1 控制器继承自Ext.app.Controller;
2 定义视图的引用,使用config/refs;
3 绑定视图的事件,使用control;可以直接使用refs定义的key或者使用ComponentQuery的表达式来指定control的key,value指向一个回调函数;回调函数内可以使用getXXX访问refs定义的视图;
4 定义URL访问路径,使用roues定义URL与Controller的映射(参考API说明);
5 config/init可以指定初始化回调函数;
6 config/launch可以指定启动回调函数;
// 视图:MainView.js
Ext.define('mvc.view.MainView', { // 定义类mvc.view.MainView
extend: 'Ext.Panel', // 继承自Ext.Panel
alias: 'widget.mainview', // 取别名为widget.mainview
requires: [ // 组件依赖声明
'Ext.Button',
'Ext.Panel',
'Ext.XTemplate'
],
config: { // 配置信息
itemId: 'mainView', // 视图容器内的唯一标识
padding: 10, // CSS padding:10px;
items: [ // 子项定义
{
xtype: 'button', // 按钮
itemId: 'runButton',
text: 'Run Action'
},
{
xtype: 'panel', // 面板
itemId: 'detailPanel',
padding: 10,
tpl: [ // 组件使用了Ext.XTemplate模板,可以指定一个字符串或者是字符串数组来显示内容;
'',
'
ID: {id}
', // 使用{xxx}来访问模型数据
'
Text: {text}
'
]
}
]
}
});
// 数据模型:MyModel.js
Ext.define('mvc.model.MyModel', { // 定义一个类mvc.model.MyModel
extend: 'Ext.data.Model', // 继承自Ext.data.Model
requires: [ // 组件依赖声明
'Ext.data.Field'
],
config: { // 配置信息
fields: [ // 字段定义
{
name: 'id', // 字段名称
type: 'int' // 字段类型
},
{
name: 'text',
type: 'string'
}
]
}
});
// 数据仓库:MyStore.js
Ext.define('mvc.store.MyStore', { // 定义类mvc.store.MyStore
extend: 'Ext.data.Store', // 继承自Ext.data.Store
requires: [ // 组件依赖声明
'mvc.model.MyModel'
],
config: { // 配置信息
model: 'mvc.model.MyModel', // 指定数据模型
storeId: 'MyStore' // 指定一个ID
}
});
// 应用程序入口:app.js
Ext.Loader.setConfig({ // 设置加载需要的配置信息
});
Ext.application({ // 运行一个应用程序
models: [ // 指定模型
'MyModel'
],
views: [ // 指定视图
'MainView'
],
controllers: [ // 指定控制器
'MyController'
],
name: 'mvc', // 名字
launch: function() { // 启动方法
Ext.create('mvc.view.MainView', {fullscreen: true}); // 创建MainView视图并全屏显示
}
});
说明
launch方法执行顺序如下:
1. Controller#init functions called
2. Profile#launch function called
3. Application#launch function called
4. Controller#launch functions called
参考:Ext.app.Application
- 大小: 41.6 KB
- 大小: 30.3 KB
分享到:
相关推荐
### FrancisShanahan-SenchaTouch2MVCHelloworld-c330be1项目 该项目是一个基于Sencha Touch 2的MVC模式Hello World示例,可能包含了创建基本模型、视图、控制器的过程,演示了如何通过MVC模式构建一个简单的应用。...
Sencha Touch MVC Demo Sencha Touch 是一个专为移动设备设计的JavaScript框架,它提供了丰富的UI组件和强大的数据管理功能,使得开发高性能的移动Web应用变得简单。在Sencha Touch中,Model-View-Controller(MVC...
在这个“Sencha Touch 2 MVC Demo”中,我们很可能会找到一个完整的示例项目,展示了如何在Sencha Touch 2中运用MVC模式来构建应用。源码的分析将有助于深入理解框架的工作原理和最佳实践。 **MVC模式详解** 1. **...
最近在学习sencha touch;走了不少弯路。我从这个sencha touch mvc框架中获益匪浅;发出来跟大家共享。直接用chrome和safari打开index.html;ie和firefox不支持。希望对大家有用
2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...
本示例“sencha-touch2 mvc demo”是关于Sencha Touch 2 MVC架构的一个简单演示,它展示了如何在移动应用中有效地组织代码并利用MVC模式。MVC(Model-View-Controller)是一种流行的设计模式,用于分离应用程序的...
在“Sencha Touch Camera MVC模式”中,我们将探讨如何在Sencha Touch中集成相机功能,并使用MVC模式进行开发。 1. **MVC模式**: MVC模式是一种软件设计模式,用于分离应用程序的数据逻辑、用户界面和业务逻辑。...
- **MVC概述**:了解Sencha Touch MVC架构的基本原理及组成部分(模型、视图、控制器)。 - **实践应用**:学习如何利用MVC架构组织代码,实现数据与UI的有效分离,提高开发效率。 4. **数据管理** - **数据模型...
Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...
2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据模型(Model)来处理业务逻辑和数据存储。 3. **视图(Views)**:介绍各种UI组件,如按钮、列表、面板、表单等,以及如何...
在本教程中,我们将深入探讨Sencha Touch 2中的MVC(Model-View-Controller)模式,并通过一个具体的登录界面例子来理解其工作原理。 MVC模式是软件设计中的经典架构,它将应用程序分为三个核心部分:模型(Model)...
Sencha Touch 2 是一款专为移动设备设计的前端框架,它基于JavaScript,利用MVC(Model-View-Controller)架构模式,为开发者提供了一套完整的工具来构建高性能的触屏应用。本示例主要关注如何在Sencha Touch 2应用...
6. **MVC模式的应用**:Sencha Touch采用Model-View-Controller(MVC)架构,允许开发者将业务逻辑、视图和数据控制分离。在动态加载场景下,可以创建独立的MVC模块,根据需要动态引入。 在"DynamicMVC"这个文件夹...
Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...
关于源码,Sencha Touch 2基于MVC(Model-View-Controller)架构,它的源码组织清晰,方便理解和扩展。学习源码有助于深入理解其工作原理,从而更好地利用其特性。你可以在`app`目录下找到模型(model)、视图(view...
Sencha Touch是一款专为Web应用程序设计的用户界面(UI)框架,主要针对移动设备。它提供了丰富的组件集合,包括按钮、表格、面板、下拉菜单等,使得开发者能够快速构建功能丰富的、具有触摸友好的交互体验的Web应用...
《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...
Sencha Touch 2.4.2 是一个专为移动设备设计的前端开发框架,它允许开发者构建高性能、跨平台的触控式Web应用程序。这款框架是Sencha公司推出的,目标是帮助开发者创建与原生应用体验相媲美的HTML5应用。在Sencha ...