ExtJS - Router（路由）

更新记录
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16581944.html
2023年2月18日 更新了内容，完善了路由的使用方法。
2022年8月13日 发布。
2022年7月26日 从笔记迁移到博客。

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

Router（路由）#

说明#

路由使用URL中的锚定位，通过URL地址中的#后面的部分进行对页面进行定位
这是目前各种前端组件的Router的通用实现方式

如果#后部分与定义的路由相匹配，则根据路由绑定
会自动调用控制器的方法，来实现视图切换或者其他功能
本质是通过正则表达式去匹配URL中#后的字符
定义在:开始的字符串会作为参数传递给调用的方法

配置路由#

定义routes配置项#

配置路由很简单，在ViewController中定义routes配置项即可。

routes配置项值是一个对象。对象的键为路由字符串，值为一个对象或者字符串。如果是字符串，则表示需要执行的方法。

实例：字符串的形式#

当hash变为#users时触发onUsers方法

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'users' : 'onUsers'
    },

    onUsers : function () {
        //...
    }
});

切换/更新路由（Updating the Hash）#

使用redirectTo方法#

this.redirectTo('user/1234');

将会切换到：

#user/1234

redirectTo方法的第2个参数#

redirectTo方法的第2个参数是一个对象，支持的参数：
force
If true, this will force the Router to react even if the hash in the address bar is the same as the hash that is being passed to redirectTo.
replace
By default, the hash will be changed and a new entry in the browser's history will be created. This means the browser's back button can go back to the previous hash. If true, the current entry in the browser's history will be replaced by the hash that was passed to redirectTo.

实例：

this.redirectTo('abc',{
    force:true,
    replace:true
});

路由参数（Hashes with Parameters）#

路由参数格式（Hash Parameter Formatting）#

使用冒号加参数名的方式进行配置即可

:参数名

实例：传入参数#

比如：hash 为 #user/666，则会将666传入id

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

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

    onUser : function (id) {
        //...
    }
});

实例：传递id和name

routes: {
    'abc/:id/:name': 'doAbc',
},

doAbc(id,name){
    console.log('doAbc');
    console.log('id:',id);
    console.log('name:',name);
},

redirectAbc(){
    console.log('redirectAbc');
    this.redirectTo('abc/666/panda',{ force:true});
},

使用 conditions 配置项#

除了使用字符串的形式配置路由参数外，还可以对路由参数进行额外的约束，conditions配置项目即可，其值是一个正则。

注意：如果不满足约束条件，路由不会进行匹配。

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'user/:id' : {
            action     : 'onUser',
            //路由参数约束
            conditions : {
                ':id' : '([0-9]+)'
            }
        }
    },

    onUser : function (id) {
        //...
    }
});

路由控制（Route Handling）#

说明#

除了正常的路由处理外，还可以对路由进行额外的逻辑判断，比如：路由前置before检查。
before配置项可以在路由执行前执行一个方法。
如果该方法内执行action.resume();，则路由继续。
如果该方法内执行action.stop();，则路由停止执行。

实例：路由执行前检查#

（尽量不要使用action了，请使用 promise对象）

Ext.define('MyApp.view.main.MainController', {
    extend : 'Ext.app.ViewController',

    routes : {
        'user/:id' : {
            before  : 'onBeforeUser',
            action  : 'onUser'
        }
    },

    //前置检查是否拥有权限
    onBeforeUser : function (id, action) {
        Ext.Ajax.request({
            url     : '/security/user/' + id,
            success : function() {
                action.resume();
            },
            failure : function () {
                action.stop();
            }
        });
    },

    onUser : function (id) {
        //...
    }
});

返回 promise 对象实例#

before对应的方法除了使用action进行处理，也可以返回一个promise对象实例。

onBeforeUser : function (id) {
    return new Ext.Promise(function (resolve, reject) {
        Ext.Ajax.request({
            url     : '/security/user/' + id,
            success : function () {
                resolve()
            },
            failure : function () {
                reject();
            }
        });
    });
},

配置默认路由（Default Token）#

you can use the defaultToken config in the /app/view/Application.js file, which can be found within your application:

Ext.define('MyApp.Application', {
    extend : 'Ext.app.Application',

    //...

    //默认路由
    defaultToken : 'home'
});

处理未匹配的路由（Handling Unmatched Routes）#

1、在全局控制器上进行监听处理
2、在应用层面进行监听处理处理
3、直接绑定全局事件

在全局控制器上进行监听处理#

Ext.application({
    name : 'MyApp',
    listen : {
        controller : {
            '#' : {
                //处理未匹配的路由
                unmatchedroute : 'onUnmatchedRoute'
            }
        }
    },
    //处理未匹配的路由
    onUnmatchedRoute : function (hash) {
        //...
    }
});

在应用层面进行监听处理处理#

Ext.application({
    name : 'MyApp',

    listen : {
        global : {
            unmatchedroute : 'onUnmatchedRoute'
        }
    },

    onUnmatchedRoute : function (hash) {
        //...
    }
});

直接绑定全局事件#

Ext.on('unmatchedroute', function (hash) {
    //...
});

单个hash中定义多个路由（Using Multiple Routes in a Single Hash）#

在单个hash中定义多个路由，使用竖线分隔即可：

#user/1234|messages

多个路由不会互相干扰，执行顺序从左向右。

除了使用竖线作为分割符，还可以自定义分隔符，写在Ext.route.Router.multipleToken即可

暂停和恢复路由（Suspending and Resuming the Router）#

暂停路由#

Ext.route.Router.suspend();

恢复路由#

//不带参数的情况下，会继续执行已在队列中的路由。
Ext.route.Router.resume();
//参数为true的情况下，不会执行已在队列中的路由，
Ext.route.Router.resume(true);

通配动作（Wildcard Action）#

说明#

是指在所有的路由执行之前，执行一个动作

实例：在所有的路由执行之前执行onRoute#

routes : {
    '*'   : 'onRoute',
    'foo' : 'onFoo'
}

实例：在所有的路由执行执行执行前置动作和onRoute#

routes : {
    '*'   : {
        before : 'onBeforeRoute',
        action : 'onRoute'
    },
    'foo' : 'onFoo'
}

路由全局事件（Global Events）#

说明#

Ext JS also exposes certain global events. These events are fired on the Ext namesapce and can be listened to from the Ext namespace or the global event domain. Here are the events:

beforeroutes Fires prior to any route being executed. Returning false allows cancellation of enacting on the routes.
beforeroute Fires prior to each route being executed. Returning false allows cancelation of enacting on that one route.
unmatchedroute Fires when a route is not matched on a token. This is also fired on the application instance if one is present.

As mentioned, there are two ways to listen for these events. The more recommended way is listening via the global event domain in a controller/viewcontroller:

listen : {
  global : {
      beforeroutes : 'onBeforeRoutes'
  }
},

onBeforeRoutes : function (action, tokens) {
  return tokens.length === 1;
}

Or you can listen via the Ext namespace:

Ext.on('unmatchedroute', function (token) {
     Ext.Msg.alert('Unmatched Route', '"' + token + '" was not matched!');
 });