javascript - 如何访问视图？| Ext.js 6

Question

目前我正在学习 ext.js 6，我有一个问题要问。

我想构建一个树状菜单，从示例中我知道如何构建各种树。但是，当用户单击树中的不同叶子时，如何更改视图？我知道我需要控制器（viewcontroller）和处理程序来处理事件（onClick 等），但是如何从那里渲染视图？

谢谢你。

Answer 1

我的应用程序（它实际上使用 ExtJS 4，但我想想法是一样的）我做这样的事情：

var viewport = Ext.create('Ext.container.Viewport', {
    alias: 'widget.viewport',

    layout: 'border',

    items: [
        // Its my main menu, displayed on all pages
        portalToolbar,
        {
            xtype: 'panel',
            itemId: 'mainPanel',
            layout: 'fit',
            region: 'center'
        }
    ]
});

在菜单项上单击我从主面板中删除所有内容并添加新内容，如下所示：

// remove previous page from main panel,
// think about `abort()`ing all ajax requests, clear intervals and so on along with this
mainPanel.removeAll();
// `currentInterface` is any component that is one of the pages of my application
mainPanel.add([currentInterface]);

您还可以查看Ext.util.History并在菜单上单击将新令牌添加到历史记录和历史change事件打开应用程序页面，如上所述。

Answer 2

您需要为此使用add()功能：

添加（组件）： Ext.Component[]/Ext.Component

将组件添加到其父级。

您需要将要呈现的视图作为参数传递

例如。将formpanel&button直接添加到视口：

 Ext.Viewport.add([
{
  xtype:'formpanel'
},
{
 xtype:'button'
}
]);