简介

Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的、企业级的Web应用程序。MVVM和双向数据绑定为开发人员承担了大量的繁重工作。在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录。前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了。

Ext JS 5路由

在Ext JS,已经可以使用Ext.util.Histroy类来处理历史记录的变化,但在Ext JS 5,这个处理变得更容易和灵活。路由提供了一种更易于配置的方式来将散列值映射到控制器的方法,这包括使用参数和之前的行为来控制路由执行的流程,而在后端则使用Ext.util.History来处理。下面来看一个简单的例子:

  1. Ext.define('MyApp.controller.Main', {
  2. extend : 'Ext.app.Controller',
  3. routes : {
  4. 'home' : 'onHome'
  5. },
  6. onHome : function() {}
  7. });

在路由对象中,关键字“home”就是要匹配的散列值,而值“onHome”就是控制器中的方法,当散列只匹配的时候,就会执行该方法(例如:http://localhost#home)。要在控制器内改变散列值,可以使用redirectTo方法:

  1. this.redirectTo(‘home’); //redirects to http://localhost#home

这将会将URL的散列值修改为“#home”,然后会执行MyApp.controller.Main控制器实例中路由所定义的的onHome方法。如果有多个控制器都匹配相同的散列值,执行的顺序将会根据应用程序实例的控制器数组中所定义的顺序执行。

散列值和参数

散列值还可以包含参数,路由可轻易的将他们作为参数传递给控制器的方法。带参数的散列值看起来像“#user/1234”,其中,1234是用户的ID,会被作为一个参数。可以通过以下方法来为控制器定义散列值:

  1. Ext.define(‘MyApp.controller.Main', {
  2. extend : 'Ext.app.Controller',
  3. routes : {
  4. 'user/:id' : 'onUser'
  5. },
  6. onUser : function(id) {}
  7. });

在为路由配置一个预期的参数的时候,需要在参数名称前添加一个冒号,在以上例子中的参数就是“:id”,路由将会把匹配的任何值作为传递参数并传递给onUser方法。传递给控制器方法的参数的顺序与路由定义时的顺序相同。

还可以使用正则表达式来控制要匹配的散列值。在用户ID的示例中,ID只能是数字值,而不允许是其他值,为了控制匹配,在路由中可以使用conditions配置项:

  1. Ext.define('Fiddle.controller.Main', {
  2. extend : 'Ext.app.Controller',
  3. routes : {
  4. 'user/:id' : {
  5. action     : 'onUser',
  6. conditions : {
  7. ':id' : '([0-9]+)'
  8. }
  9. }
  10. },
  11. onUser : function(id) {}
  12. });

示例中演示了两样东西:路由的定义可以是一个对象,action属性对应的是控制器的方法,以及使用conditions配置项。配置项conditions是一个包含参数和正则表达式字符串的对象。采用正则表达式字符串,而不是正则表达式的原因是,路由会根据路由内的参数创建一个默认的正则表达式,而conditions配置项的作用就是重写默认的正则表达式字符串。默认的正则表达式字符串是“([%a-zA-Z0-9\\-\\_\\s,]+)”。

如果没有匹配路由的散列值,就会在应用程序中触发unmatchedroute事件,该事件可在应用程序中或控制器中进行监听,无论在哪里,监听方式都是一样的。以下是在控制器中监听的示例:

  1. Ext.define('Fiddle.controller.Main', {
  2. extend : 'Ext.app.Controller',
  3. listen : {
  4. controller : {
  5. '*' : {
  6. unmatchedroute : 'onUnmatchedRoute'
  7. }
  8. }
  9. },
  10. onUnmatchedRoute : function(hash) {}
  11. });

有时候,为了避免路由继续执行或等待ajax请求这样的异步操作而延迟执行,需要将路由的处理过程挂起。为了实现这个,可以在路由中定义before操作,且可将路由中定义的任何参数传递给它。以下是一个使用ajax请求的示例,且在请求完成后继续执行路由:

  1. Ext.define('Fiddle.controller.Main', {
  2. extend : 'Ext.app.Controller',
  3. routes : {
  4. 'user/:id' : {
  5. action     : 'onUser',
  6. before     : 'beforeUser',
  7. conditions : {
  8. ':id' : '([0-9]+)'
  9. }
  10. }
  11. },
  12. beforeUser : function(id, action) {
  13. Ext.Ajax.request({
  14. url     : '/user/confirm',
  15. params  : {
  16. userid : id
  17. },
  18. success : function() {
  19. action.resume();
  20. },
  21. failure : function() {
  22. action.stop();
  23. }
  24. });
  25. },
  26. onUser : function(id) {}
  27. });

方法beforeUser会象onUser方法一样接收id参数,不过,它还可获取到一个action参数。参数action包含有resume和stop方法用来控制路由的执行。执行action的resume方法,如Ext.Ajax.request的success处理中的那样,将会恢复路由的执行,这样就可实现路由的异步行为。执行action的stop方法,正如在failure回调函数中卡你打那样,会停止当前路由的执行。如果将true传递给stop方法,队列中的所有路由都会停止执行,这样就可以对路由实现完整的控制。

Ext JS应用程序可能会变得很大很复杂,而且有时候可能会希望在同一时间激活多个散列值。Ext JS 5有能力去处理多个散列值并分别去执行他们。单独的散列值会被沙盒化,这意味着如果需要取消一个路由,可以将true传递给action.resume方法,这就可以阻止该散列值的其他路由,而其他的散列值会继续执行。每一个散列值都需要进行分隔,如以下示例的散列值:

  1. #user/1234|message/5ga

路由会将散列值拆分为“user/1234”和“message/5ga”。路由会根据user的值去找到所有匹配的路由并执行任何匹配的路由。如果没有匹配散列值的路由,就会触发unmatchedroute事件。接下来,路由将会根据message的值来寻找任何匹配的路由并执行他们。如果没有匹配值的路由,将会触发unmatchedroute事件。

小结

Ext JS 5中的新的路由特性是处理浏览器历史堆栈的一直简单配置方式,它不单灵活,而且功能强大,足以满足复制的应用程序的需要。与MVC+VM、双向数据绑定和其他新特性在一起,使Ext JS 5成为了一个打造企业级应用程序的完美框架。

在Ext JS 5应用程序中如何使用路由的更多相关文章

  1. 【翻译】在Ext JS 5应用程序中怎样使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简单介绍 Ext JS 5是一个重要的公布版本号,它提供了很多新特性来创建丰富的.企业级的Web应用程序.MVV ...

  2. 【翻译】在Ext JS 5应用程序中如何使用路由

    原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双 ...

  3. 将Ext JS 5应用程序导入Web项目以及实现本地化

    在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦.而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题. 将Ext JS 5应用程序导入W ...

  4. 【翻译】Ext JS 5.0.1 中的新功能

    原文:What's New in Ext JS 5.0.1 今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进.下面让我们来了解一下这些改变. 可访 ...

  5. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  6. Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理

    概述 在对Ext JS 6的应用程序打包后,时不时会出现以下错误: 由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事. 错误原因 造成该错误的主要原因是要创 ...

  7. 将Ext JS 6应用程序导入Web项目

    由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用S ...

  8. 【翻译】针对多种设备定制Ext JS 5应用程序

    原文:Tailoring Your Ext JS 5 Application for a Multi-Device World 概述 鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已 ...

  9. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

随机推荐

  1. magento做手机端思路

     有个插件可以检测移动设备访问,然后显示对于的手机主题这个方法最简单另外的就是调接口了这个用来做app也行不过mg的数据不是json数据,是xml速度很慢

  2. session 原理 数据结构

    [原创]转载请保留出处:shoru.cnblogs.com 晋哥哥的私房钱 引言 在web开发中,session是个非常重要的概念.在许多动态网站的开发者看来,session就是一个变量,而且其表现像 ...

  3. OpenFlow Switch学习笔记(一)——基础概念

    OpenFlow Switch v1.4.0规范是在2013年10月14号发布,规范涵盖了OpenFlow Switch各个组件的功能定义.Controller与Switch之间的通信协议Open F ...

  4. 这是高手最常用的第一快捷组合键 - imsoft.cnblogs

    1.锁定电脑 2.要找电脑上的文件时,一般人会先找到“我的电脑”,然后点击打开,而高手总是很酷的,轻轻按下键盘上的Windows键不放然后再按E键,直接打开电脑的资源管理器,而一般人还在慢慢寻找“我的 ...

  5. iOS学习笔记---c语言第九天

    高级指针 指向结构体变量的指针,称为结构体指针 可以使用->指向内容. %p打印地址 void pLenth(cPoint *p1,cPoint *p2) //求两点间的距离  用的开方函数sq ...

  6. Prepared Java infrastructure for distributed scenarios

    code is sited on: https://github.com/zhoujiagen/javaiospike progress 2015/5/27 Nio/Nio2 examples, us ...

  7. 矩阵基本运算的 Python 实现

    from...import与import区别在于import直接导入指定的库,而from....import则是从指定的库中导入指定的模块 import...as则是将import A as B,给予 ...

  8. SpringSecurity相关配置【SpringSecurityConfig】

    SpringSecurity的配置相对来说有些复杂,如果是完整的bean配置,则需要配置大量的bean,所以xml配置时使用了命名空间来简化配置,同样,spring为我们提供了一个抽象类WebSecu ...

  9. maven出错The folder is already a source folder

    右键build path -> configure build path -> source ,选择 src/main/java.src/test/java删除,然后再新建.

  10. 越狱Season 1-Episode 13: End of the Tunnel

    Season 1, Episode 13: End of the Tunnel -Fernando: The name is John Abruzzi. 名字是John Abruzzi A b r u ...