ExtJS 7.0：从viewA跳转至viewB后如何获取参数并执行操作？

一、ViewA中携带参数跳转到ViewB #

有两种常见的参数传递方式，对应不同的路由配置逻辑：

方式1：通过查询参数传递（?id=1234） #

在ViewA的交互逻辑（比如按钮点击事件）中，直接拼接查询参数到路由地址：

// ViewA中的跳转代码示例
Ext.route.Router.redirectTo('B?id=1234');

方式2：通过路由路径参数传递（#B/1234） #

这种方式更符合REST风格，跳转时直接将参数嵌入路由路径：

// ViewA中的跳转代码示例
Ext.route.Router.redirectTo('B/1234');

二、ViewB中配置路由并获取参数执行操作 #

根据上面的传递方式，ViewB需要对应配置路由监听，获取参数后执行搜索逻辑：

对应方式1：处理查询参数 #

在ViewB的类定义中，配置routes属性监听路由B，并在处理函数中解析查询参数：

Ext.define('YourApp.view.ViewB', {
    extend: 'Ext.panel.Panel',
    xtype: 'viewb',

    routes: {
        'B': {
            action: function(hash) {
                // 解析URL中的查询参数
                const params = Ext.Object.fromQueryString(hash);
                const targetId = params.id; // 此处获取到参数1234
                
                // 调用搜索方法
                this.executeSearch(targetId);
            }
        }
    },

    methods: {
        executeSearch: function(id) {
            // 这里编写具体的搜索逻辑
            console.log('开始搜索，目标ID：', id);
            // 示例：请求后台接口加载数据
            // Ext.Ajax.request({
            //     url: '/api/search',
            //     params: { id: id },
            //     success: function(response) {
            //         // 处理返回结果
            //     }
            // });
        }
    }
});

对应方式2：处理路径参数 #

先在全局路由配置（通常是app.js）中定义带参数的路由规则，再在ViewB中监听获取参数：

1. 全局路由配置（app.js）

Ext.application({
    name: 'YourApp',
    routes: {
        'B/:id': {
            view: 'viewb' // 指定匹配该路由时加载ViewB
        }
    },
    // 其他应用配置...
});

2. ViewB中获取路径参数并执行操作

Ext.define('YourApp.view.ViewB', {
    extend: 'Ext.panel.Panel',
    xtype: 'viewb',

    routes: {
        'B/:id': {
            action: function(id) {
                // 直接获取路径中的ID参数1234
                this.executeSearch(id);
            }
        }
    },

    methods: {
        executeSearch: function(id) {
            // 执行搜索逻辑
            console.log('开始搜索，目标ID：', id);
            // 示例：绑定store加载数据
            // this.getStore().load({ params: { id: id } });
        }
    }
});

注意事项 #

• 确保应用已启用路由功能，ExtJS 7默认会初始化Ext.route.Router，若有自定义配置需确认路由系统正常工作。
• 如果ViewB已存在于DOM中，路由变化时会再次触发action函数，可添加状态判断避免重复执行搜索操作。

内容的提问来源于stack exchange，提问作者sd1036770