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

原文:How to Use Routing in Your Ext JS 5 Apps

简介

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来处理。下面来看一个简单的例子:

    Ext.define(‘MyApp.controller.Main‘, {
        extend : ‘Ext.app.Controller‘,

        routes : {
            ‘home‘ : ‘onHome‘
        },

        onHome : function() {}
    });
 

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

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

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

散列值和参数

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

    Ext.define(‘MyApp.controller.Main‘, {
        extend : ‘Ext.app.Controller‘,

        routes : {
            ‘user/:id‘ : ‘onUser‘
        },

        onUser : function(id) {}
    });

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

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

    Ext.define(‘Fiddle.controller.Main‘, {
        extend : ‘Ext.app.Controller‘,

        routes : {
            ‘user/:id‘ : {
                action     : ‘onUser‘,
                conditions : {
                    ‘:id‘ : ‘([0-9]+)‘
                }
            }
        },

        onUser : function(id) {}
    });

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

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

    Ext.define(‘Fiddle.controller.Main‘, {
        extend : ‘Ext.app.Controller‘,

        listen : {
            controller : {
                ‘*‘ : {
                    unmatchedroute : ‘onUnmatchedRoute‘
                }
            }
        },

        onUnmatchedRoute : function(hash) {}
    });

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

    Ext.define(‘Fiddle.controller.Main‘, {
        extend : ‘Ext.app.Controller‘,

        routes : {
            ‘user/:id‘ : {
                action     : ‘onUser‘,
                before     : ‘beforeUser‘,
                conditions : {
                    ‘:id‘ : ‘([0-9]+)‘
                }
            }
        },

        beforeUser : function(id, action) {
            Ext.Ajax.request({
                url     : ‘/user/confirm‘,
                params  : {
                    userid : id
                },
                success : function() {
                    action.resume();
                },
                failure : function() {
                    action.stop();
                }
            });
        },

        onUser : function(id) {}
    });
 

方法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方法,这就可以阻止该散列值的其他路由,而其他的散列值会继续执行。每一个散列值都需要进行分隔,如以下示例的散列值:

#user/1234|message/5ga

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

小结

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

作者:Mitchell Simoens
Mitchell is a Senior Support Engineer providing support on the forums and the portal. Mitchell also is the maintainer of Sencha Fiddle and other web properties. Mitchell is also the co-author of "Sencha Touch in Action", and is a regular contributor of Ext JS and Sencha Touch frameworks, as well as extensions and plugins on GitHub.

【翻译】在Ext JS 5应用程序中如何使用路由,布布扣,bubuko.com

时间: 2024-10-27 02:05:01

【翻译】在Ext JS 5应用程序中如何使用路由的相关文章

在Ext JS 5应用程序中如何使用路由

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

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

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析. 虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常

将Ext JS 5应用程序导入Web项目中

将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 效果图: 工程目录结构图:   准备资料: 先到官网上下载ext-5.1.0-gpl.zip然后解压,官网上的我看到buy我就没敢下载了,嘻嘻也可以到csdn上去找http://cdn.sencha.com/ext/gpl/ext-5.1.0-gpl.zip,本来想传上去的,可是说70m太大了不让传,

【翻译】Ext JS最新技巧——2014-5-12

原文:http://www.sencha.com/blog/top-support-tips-may-2014?mkt_tok=3RkMMJWWfF9wsRoluazJZKXonjHpfsX77OQlXK%2B%2FlMI%2F0ER3fOvrPUfGjI4AT8NjI%2BSLDwEYGJlv6SgFSbfBMbdlybgMWRA%3D Seth Lemmons:为网格行设置不同的高度 在整个网格中,行高通常都会保持为同一高度.然而,这并不适用于所有情形,有时候需要根据单元格中的数据来自动调整

【翻译】Ext JS 5的平板支持

原文:Ext JS 5 Tablet Support Ext JS已被公认为桌面Web应用程序的领先框架.自从平板开始在全球挑战PC的销售,无论是个人还是企业,电脑横向的应用已经产生急剧的变化.Sencha意识到了这种变化,并推出了包含新功能和进行优化了的Ext JS 5. Ext JS从Sencha Touch 2学到了一些新把戏.多年最好的移动Web应用程序框架经验的沉淀要应对现代平板电脑上的桌面显示,那是卓卓有余的.通过类系统.事件管理.窗口小部件和新的部署选项就可以了解到这些更新. 除了

【翻译】Ext JS——高效的编码风格指南

原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字来创建一个组件或类的实例是一种错误的做法,因为这没有遵循组件的生命周期.应该使用Ext.create方法来创建对象,例如: 错误: var obj = new Ext.panel.Panel(); 正确: var obj = Ext.create('Ext.panel.Panel'); 初始化直接量:不要直接

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

在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦.而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题. 将Ext JS 5应用程序导入Web项目 在Ext JS 5,会使用bootstrap.js来加载应用程序脚本和样式,而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的.问题就在这个Bootstrap.json文件上,如果是使用IIS的Web项目,首先会碰到的问题是Web服务器不允许下载JSON文件

【翻译】Ext JS 6有什么新东西?

工具包ToolKits 发布 包的命名 Fashion 图表 ItemEdit插件 网格 电子表格 可操作模式Actionable Mode和可访问性 LazyItems插件 屏幕阅读器支持可访问性 微加载Microloader Touch网格 原文:http://docs.sencha.com/extjs/6.0/whats_new/6.0.0/whats_new.html Ext JS在Sencha框架中引入了许多新的和令人兴奋的改进.这些变化为基于所有现代浏览器.设备和屏幕尺寸带来了新的功

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

由于Ext JS 6包含了Sencha Touch,因而在应用程序结构有了些改变,Ext JS 5的方法已经不适用于新版本了.经过研究,发现6导入Web项目要比5简单. 下面来说说导入的过程. 使用Sencha Cmd创建应用程序 创建Web项目 在Web项目创建脚本目录,如scripts,直接访问路径为http://域名/scripts 将创建的应用程序目录下的文件和目录全部复制到scripts目录下 将应用程序下的Index.html目录复制到scripts目录的上一层目录,也就是能通过..