简介

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. 第二个sprint第一天

    一.例会人员:李泳江,邵家文,周伟雄,谢洪跃 日期:6月1号   例会内容: 1.用户调研,修复bug,要对初期的版本的bug进行解决,以便能够在6月3号演示. 2.整个第二个sprint 我们队伍要 ...

  2. 3des加解密算法

    编号:1003时间:2016年4月1日09:51:11功能:openssl_3des加解密算法http://blog.csdn.net/alonesword/article/details/17385 ...

  3. java实现读取文件大全

    1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件 ...

  4. Linux netlink机制

    netlink 是一种特殊的 socket,它是 Linux 所特有的,类似于 BSD 中的AF_ROUTE 但又远比它的功能强大,目前在最新的 Linux 内核(2.6.14)中使用netlink ...

  5. JS基础知识(数据类型)

      1,关于typeof   因为是弱类型语言,而程序代码中又不得不定义出变量的类型所提供出来的方法. 返回的结果如下图:   如下例子: var test = "123"; va ...

  6. JQuery中操作Css样式

    //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...

  7. 矩阵卷积Matlab(转载)

    转载自:http://blog.csdn.net/anan1205/article/details/12313593 两个矩阵卷积转化为矩阵相乘形式--Matlab应用(这里考虑二维矩阵,在图像中对应 ...

  8. Codeforces Round #260 (Div. 2) A B C 水 找规律(大数对小数取模) dp

    A. Laptops time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  9. 第五课,T语言转义字符()(版本5.0)

    转义字符 字符串取值没什么限制,在引号""中可以填:数字.中文.字母 .特殊字符.以及他们的组合,字符串的值都要用双引号扩起来,比如 "我是字符型",当然,有人 ...

  10. HDU-4089 Activation (概率DP求概率)

    题目大意:一款新游戏注册账号时,有n个用户在排队.每处理一个用户的信息时,可能会出现下面四种情况: 1.处理失败,重新处理,处理信息仍然在队头,发生的概率为p1: 2.处理错误,处理信息到队尾重新排队 ...