为我的视图实现路由系统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',iconCls: 'fas fa-address-card'
                        },{
                            text: 'User',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");，但均无效。

解决方法

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

Router Documentation此网页描述了路由器的使用方式。这是非常快速的阅读。

示例（管理仪表板，同事应用程序）通过使哈希成为要显示的面板（视图）的xtype的一种常见方式。

因此，主面板扩展了“ Ext.navigation.View”。然后，基于哈希值，创建视图的新实例，将其添加到主面板中并使其成为活动项。您还可以检查xtype是否已经添加到导航视图中，并使其变为活动面板。

Fiddle showing use of router（这不是我的）。这是展示如何使用路由器的小提琴。我建议先阅读文档。 sencha文档实际上相当不错，您可以学习如何按预期使用Extjs库，并真正加快开发速度。