Question

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

我想建立一个类似树的菜单，从examples我知道如何建造各种树木。但是，当用户点击树中的不同leef时，如何更改视图？我知道我需要控制器（viewcontroller）和处理程序来处理事件（onClick等）但是如何从那里渲染视图？

谢谢。

Answer 1

您需要使用add()函数：

add（component）： Ext.Component [] / Ext.Component

将组件添加到其父组件。

您需要将视图传递为参数

EG。添加formpanel＆amp; button直接到视口：

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

Answer 2

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

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

2 个答案: