`
海底的潮水
  • 浏览: 5064 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

sencha touch mvc

 
阅读更多
从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
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    Sencha Touch MVC 模式

    ### FrancisShanahan-SenchaTouch2MVCHelloworld-c330be1项目 该项目是一个基于Sencha Touch 2的MVC模式Hello World示例,可能包含了创建基本模型、视图、控制器的过程,演示了如何通过MVC模式构建一个简单的应用。...

    sencha touch mvc Demo

    Sencha Touch MVC Demo Sencha Touch 是一个专为移动设备设计的JavaScript框架,它提供了丰富的UI组件和强大的数据管理功能,使得开发高性能的移动Web应用变得简单。在Sencha Touch中,Model-View-Controller(MVC...

    Sencha Touch2 MVC Demo (含源码/数据库)

    在这个“Sencha Touch 2 MVC Demo”中,我们很可能会找到一个完整的示例项目,展示了如何在Sencha Touch 2中运用MVC模式来构建应用。源码的分析将有助于深入理解框架的工作原理和最佳实践。 **MVC模式详解** 1. **...

    sencha_touch_mvc

    最近在学习sencha touch;走了不少弯路。我从这个sencha touch mvc框架中获益匪浅;发出来跟大家共享。直接用chrome和safari打开index.html;ie和firefox不支持。希望对大家有用

    sencha touch项目源码

    2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...

    sencha-touch2 mvc demo

    本示例“sencha-touch2 mvc demo”是关于Sencha Touch 2 MVC架构的一个简单演示,它展示了如何在移动应用中有效地组织代码并利用MVC模式。MVC(Model-View-Controller)是一种流行的设计模式,用于分离应用程序的...

    sencha touch camera MVC模式

    在“Sencha Touch Camera MVC模式”中,我们将探讨如何在Sencha Touch中集成相机功能,并使用MVC模式进行开发。 1. **MVC模式**: MVC模式是一种软件设计模式,用于分离应用程序的数据逻辑、用户界面和业务逻辑。...

    Hands-On Sencha Touch 2

    - **MVC概述**:了解Sencha Touch MVC架构的基本原理及组成部分(模型、视图、控制器)。 - **实践应用**:学习如何利用MVC架构组织代码,实现数据与UI的有效分离,提高开发效率。 4. **数据管理** - **数据模型...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    sencha touch中文翻译文档

    2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据模型(Model)来处理业务逻辑和数据存储。 3. **视图(Views)**:介绍各种UI组件,如按钮、列表、面板、表单等,以及如何...

    Sencha Touch 2入门教程之MVC例子程序源代码

    在本教程中,我们将深入探讨Sencha Touch 2中的MVC(Model-View-Controller)模式,并通过一个具体的登录界面例子来理解其工作原理。 MVC模式是软件设计中的经典架构,它将应用程序分为三个核心部分:模型(Model)...

    Sencha Touch 2 MVC Demo 本地Json访问数据

    Sencha Touch 2 是一款专为移动设备设计的前端框架,它基于JavaScript,利用MVC(Model-View-Controller)架构模式,为开发者提供了一套完整的工具来构建高性能的触屏应用。本示例主要关注如何在Sencha Touch 2应用...

    sencha touch动态加载组件

    6. **MVC模式的应用**:Sencha Touch采用Model-View-Controller(MVC)架构,允许开发者将业务逻辑、视图和数据控制分离。在动态加载场景下,可以创建独立的MVC模块,根据需要动态引入。 在"DynamicMVC"这个文件夹...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    sencha touch2学习笔记(一)---环境搭建和开发工具配置

    关于源码,Sencha Touch 2基于MVC(Model-View-Controller)架构,它的源码组织清晰,方便理解和扩展。学习源码有助于深入理解其工作原理,从而更好地利用其特性。你可以在`app`目录下找到模型(model)、视图(view...

    webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip

    Sencha Touch是一款专为Web应用程序设计的用户界面(UI)框架,主要针对移动设备。它提供了丰富的组件集合,包括按钮、表格、面板、下拉菜单等,使得开发者能够快速构建功能丰富的、具有触摸友好的交互体验的Web应用...

    《SenchaTouch权威指南》源代码-

    《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...

    Sencha Touch-2.4.2

    Sencha Touch 2.4.2 是一个专为移动设备设计的前端开发框架,它允许开发者构建高性能、跨平台的触控式Web应用程序。这款框架是Sencha公司推出的,目标是帮助开发者创建与原生应用体验相媲美的HTML5应用。在Sencha ...

Global site tag (gtag.js) - Google Analytics