Sencha logo  
 
产品咨询热线:021-32120333
 
       
 
 
 
Sencha Anmimator
HTML5动画编辑工具 Sencha Animator
Sencha Animator 是一个基于GUI的编辑器,针对的是想要创建HTML5动画的交互设计师。
 
 
 
Sencha的MVC模式实践
 

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

01.new Ext.Application({
02.name: 'MyApp',
03.launch: function() {
04.this.viewport = new Ext.Panel({
05.fullscreen: true,
06. 
07.id    : 'mainPanel',
08.layout: 'card',
09.items : [
10.{
11.html: '欢迎来到我们的程序!Welcome to My App!'
12.}
13.]
14.});
15.}
16.});

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

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

启动函数其职责一般是创建应用程序的Viewport视图和任何程序需要启动的步骤。启动函数应该只会运行一次。
路由与历史的支持 Routes and history support

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

1.//Note the # in the url examples below
2.Ext.Router.draw(function(map) {
3.//maps the url <a href="http://mydomain.com/#dashboard">http://mydomain.com/#dashboard</a> to the home controller's index action
4.map.connect('dashboard', {controller: 'home', action: 'index'});
5.//fallback route - would match routes like <a href="http://mydomain.com/#users/list">http://mydomain.com/#users/list</a> to the 'users' controller's
6.//'list' action
7.map.connect(':controller/:action');
8.});

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

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

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

01.new Ext.Application({
02.name: 'MyApp',
03.profiles: {
04.phone: function() {
05.return Ext.is.Phone;
06.},
07.tabletPortrait: function() {
08.return Ext.is.Tablet && Ext.orientation == 'portrait';
09.},
10.tabletLandscape: function() {
11.return Ext.is.Tablet && Ext.orientation == 'landscape';
12.}
13.}
14.});

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


TOP

 
其他产品
 
  • Sencha Complete
  • Sencha Complete:Team
  • Sencha Touch
  • Sencha Ext JS
  • Sencha Animator
  • Sencha GXT
  • Sencha Architect
  •  
    中文教程
     
  • 优化基于EXTJS 4.1的应用
  • 如何创建一个SENCHA TOUCH 2应用(第一部分)
  • 在线PHONEGAP打包SENCHA TOUCH 2客户端应用
  • SENCHA TOUCH自动生成工具
  • EXTJS 4应用架构设计
  •  
    咨询热线:021-32120333 传真:021-62119020 邮箱:info@senchasoftware.com