Sencha的MVC模式实践

简介: Sencha Touch中,Application对象表示整个Sencha的应用程序。对于大多数程序而言,它至少包括有应用程序的名称和一个启动函数: new Ext.Application({ name: 'MyApp', launch: function() { this.

Sencha Touch中,Application对象表示整个Sencha的应用程序。对于大多数程序而言,它至少包括有应用程序的名称和一个启动函数:

new Ext.Application({ name: 'MyApp', launch: function() { this.viewport = new Ext.Panel({ fullscreen: true, id : 'mainPanel', layout: 'card', items : [ { html: '欢迎来到我们的程序!Welcome to My App!' } ] }); } });

实例化新的程序的时候,会自动依据配置项name来定义一个全局变量,设置程序的命名空间,包括有视图的命名空间、store的命名空间和控制器的命名空间。

// 当创建程序就是定义下面的代码 // 与Ext.ns的作用一致 ('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');

启动函数其职责一般是创建应用程序的Viewport视图和任何程序需要启动的步骤。启动函数应该只会运行一次。

路由与历史的支持 Routes and history support

Ext应用程序提供紧密的关联与历史的支持,允许你的用户在应用程序中,既可以使用“后退”按钮,也可以“刷新”页面,哪怕关闭回来后相同的屏幕。紧密的历史回溯依靠路由引擎(Routing Engine)的支持,将url映射到controller/action。这里是一个定义路由的例子:

//Note the # in the url examples below Ext.Router.draw(function(map) { //maps the url http://mydomain.com/#dashboard to the home controller's index action map.connect('dashboard', {controller: 'home', action: 'index'}); //fallback route - would match routes like http://mydomain.com/#users/list to the 'users' controller's //'list' action map.connect(':controller/:action'); });

如果你透过Sencha Command工具生成脚本来导出Sencha程序,那么将会看到这个文件已经位于程序目录的app/routes.js。历史驱动可以指定defaultUrl 配置项,在当前没有设置url的情况下派遣到默认的url。

new Ext.Application({ name: 'MyApp', defaultUrl: 'dashboard' });

Application profiles

Applications支持为程序提供多个profiles并且可以依据此自配置。这里我们设置了Application的三个profile,一个是手机上的,另外两个是table PC的landscape和portrait方向。

new Ext.Application({ name: 'MyApp', profiles: { phone: function() { return Ext.is.Phone; }, tabletPortrait: function() { return Ext.is.Tablet && Ext.orientation == 'portrait'; }, tabletLandscape: function() { return Ext.is.Tablet && Ext.orientation == 'landscape'; } } });

当Application 检查其prfile的列表时候,第一个返回true的那个函数表示就是当前的函数。当profile发生变化时,Application会自动检测哪一个profile使用(比如,在tablet方向从portrait变为landscape模式的时候),并触发profilechange事件。同时也会通知页面上所有的 Ext.Component已经改变了当前的profile,进而调用组件的setProfile()函数。setProfile函数一个空函数,你可以为你的组件在交互不同设备写入新的实现。API中可通过getProfile()获取当前的profile。如果Application没有成功检测profile发生则改变可以手动执行determineProfile() 。

目录
相关文章
|
7月前
|
前端开发 Java 开发者
MVC 架构模式技术详解与实践
本文档旨在全面解析软件工程中经典且至关重要的 MVC(Model-View-Controller) 架构模式。内容将深入探讨 MVC 的核心思想、三大组件的职责与交互关系、其优势与劣势,并重点分析其在现代 Web 开发中的具体实现,特别是以 Spring MVC 框架为例,详解其请求处理流程、核心组件及基本开发实践。通过本文档,读者将能够深刻理解 MVC 的设计哲学,并掌握基于该模式进行 Web 应用开发的能力。
1495 1
|
XML 前端开发 安全
Spring MVC:深入理解与应用实践
Spring MVC是Spring框架提供的一个用于构建Web应用程序的Model-View-Controller(MVC)实现。它通过分离业务逻辑、数据、显示来组织代码,使得Web应用程序的开发变得更加简洁和高效。本文将从概述、功能点、背景、业务点、底层原理等多个方面深入剖析Spring MVC,并通过多个Java示例展示其应用实践,同时指出对应实践的优缺点。
708 2
|
存储 前端开发 测试技术
MVC、MVP、MVVM 模式
MVC、MVP 和 MVVM 是三种常见的软件架构模式,用于分离用户界面和业务逻辑。MVC(Model-View-Controller)通过模型、视图和控制器分离数据、界面和控制逻辑;MVP(Model-View-Presenter)将控制逻辑移到 Presenter 中,减少视图的负担;MVVM(Model-View-ViewModel)通过数据绑定机制进一步解耦视图和模型,提高代码的可维护性和测试性。
|
前端开发 Java
【案例+源码】详解MVC框架模式及其应用
【案例+源码】详解MVC框架模式及其应用
1297 0
|
设计模式 开发框架 前端开发
MVC 模式在 C# 中的应用
MVC(Model-View-Controller)模式是广泛应用于Web应用程序开发的设计模式,将应用分为模型(存储数据及逻辑)、视图(展示数据给用户)和控制器(处理用户输入并控制模型与视图交互)三部分,有助于管理复杂应用并提高代码可读性和维护性。在C#中,ASP.NET MVC框架常用于构建基于MVC模式的Web应用,通过定义模型、控制器和视图,实现结构清晰且易维护的应用程序。
325 2
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
设计模式 前端开发 PHP
PHP中实现简易的MVC模式
【8月更文挑战第31天】 本文将引导你了解如何在PHP中应用MVC(Model-View-Controller)架构模式,通过一个简单的例子展示其实现过程。我们将从基础的概念出发,逐步深入到代码实践,最终让你能够自己动手构建一个简易的MVC框架。文章不仅提供理论知识,还包含具体的代码示例,帮助你更好地理解并运用MVC模式。
|
设计模式 前端开发 Java
mvc模式详解
mvc模式详解
|
设计模式 存储 前端开发
MVC(Model-View-Controller)是一种软件设计模式,用于将应用程序的输入逻辑、业务逻辑和用户界面逻辑分离
【6月更文挑战第17天】**MVC模式**是软件设计模式,用于分离输入逻辑、业务逻辑和用户界面。模型处理数据和业务,视图展示数据,控制器协调两者响应用户请求。优点包括:关注点分离、提高开发效率、简化测试、支持多视图及便于大型项目管理。
372 3
|
设计模式 存储 前端开发
MVVM、MVC、MVP三种常见软件架构设计模式的区别
MVC、MVP 和 MVVM 是三种常见的软件架构设计模式,主要通过分离关注点的方式来组织代码结构,优化开发效率。
1602 12