为我的视图实现路由系统(ExtJS)

ltqd579y  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(124)

我想在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");但都不起作用.

dwbf0jvd

dwbf0jvd1#

路由类似于触发事件。最终结果是调用一个函数。根据路由的设置,哈希值被传递给函数。您可以为每个哈希值调用不同的函数,也可以使用哈希值或URI的其他部分来确定要执行的操作。
Router Documentation这个网页描述了路由器是如何使用的。这是一个非常快速的阅读。
示例(管理 Jmeter 板,coworkee应用程序)的一种常见方法是将hash作为您要显示的面板(视图)的xtype。
所以你的主面板扩展了“Ext.navigation. view”。然后基于哈希值创建一个新的视图示例,将其添加到主面板并使其成为活动项。你也可以检查xtype是否已经被添加到导航视图并使其成为活动面板。
显示路由器使用的小提琴(这不是我的)。这里有一个显示如何使用路由器的小提琴。我建议先阅读文档。 Sencha 文档实际上相当不错,你可以学习如何按照预期使用Extjs库,真正加快你的开发速度。

相关问题