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