如何访问视图? |分机.js 6.

How to get access to the view? | Ext.js 6

本文关键字：分机 js 视图 何访问 访问      更新时间：2023-09-26

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

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

谢谢。

您需要

为此使用add()函数：

add( component ( ： Ext.Component[]/Ext.Component

将组件添加到其父级。

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

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

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

我是我的应用程序(它实际上使用 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事件打开应用程序页面，如上所述。

相关文章：