时间戳

首页 > 解决方案 > 为我的视图实现路由系统（ExtJS）

extjs - 为我的视图实现路由系统（ExtJS）

问题描述

我想在 ExtJS 中为我​​的基本视图实现一个路由，以便在显示它时（单击按钮）URL 会发生变化，当我想返回到初始视图时，它可以通过显示正确的视图来工作。

给我的视图类：

Ext.define('Traccar.view.newDashboard', {
    extend: 'Ext.Container',
    alias: 'widget.newDashboard',
    id: 'geoAfricaDashboard',

routes : {
        'dashboard' : ''

     },

    layout: {
        type: 'border',
        align: 'stretch '
    },
    height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{
        // xtype: 'panel' implied by default
        title: 'Geo-Africa Administration',
        region: 'west',
        xtype: 'panel',
        //margin: '5 0 0 5',
        width: 200,
        collapsible: true, // make collapsible
        id: 'west-region-container',
        layout: 'fit',
        items: [{
            xtype: 'treelist',

            store: {
                root: {
                    expanded: true,
                    children: [{
                        text: 'Options',
                        leaf: true,
                        iconCls: 'fas fa-address-book'
                    }, {
                        text: 'Administration',
                        expanded: true,
                        iconCls: 'far fa-id-badge',
                        children: [{
                            text: 'Configuration',
                            leaf: true,
                            iconCls: 'fas fa-address-card'
                        }, {
                            text: 'User',
                            leaf: true,
                            iconCls: 'fas fa-child'
                        }]
                    }]
                }
            },
            renderTo: Ext.getBody()
        }]
    }, {
        xtype: 'basic-panels'

        // width: '100%'
    }]

我在按钮单击时呈现如下：

  var dash =  Ext.create('widget.newDashboard', {
               renderTo: Ext.getBody(),
                hideMode: 'visibility'
             });
              dash.show();

如何在 ExtJS (6.2.0) 中为该视图分配路由 URI？

感谢您的大力帮助？PS：我试过了

routes : {
        'dashboard' : ''

     },

否则 this.redirectTo("dashboard");但两者都不起作用。

标签： extjsviewextjs5

解决方案

该路线类似于触发事件。最终结果是调用了一个函数。哈希根据路由的设置方式传递给函数。您可以为每个散列调用不同的函数，也可以使用散列或 URI 的其他部分来确定要做什么。

路由器文档该网页描述了如何使用路由器。这是一个非常快速的阅读。

示例（管理仪表板、coworkee 应用程序）的常见方式是让哈希成为您要显示的面板（视图）的 xtype。

所以你的主面板扩展了'Ext.navigation.View'。然后根据散列创建视图的新实例，将其添加到主面板并使其成为活动项。您还可以检查 xtype 是否已添加到导航视图中，并将其设为活动面板。

小提琴显示路由器的使用（这不是我的）。这是一个展示如何使用路由器的小提琴。我建议先阅读文档。sencha 文档实际上非常好，您可以学习如何按预期使用 Extjs 库并真正加快您的开发速度。

推荐阅读