单击 ExtJS 中的树列表节点后如何生成视图？

Question

我有一个 Extjs 项目和文件如下：

应用程序：

-> 查看 -> 主要 -> MainController.js

-> 查看 -> 类别 -> CategoriesController.js

经典:

-> 查看

-> 主要 -> Main.js

->类别 -> Categories.js

而且我为此使用了树列表。

现在，我希望当用户单击树列表节点时生成视图。例如：当点击类别节点时，生成Category.js视图。

我该怎么做？

Answer 1

您需要将侦听器关联到 treelist 以处理用户的点击事件（在包含 treelist 的视图上）。您可以收听 selectionchange 事件。

{
  xtype: 'treelist',
  store: 'NavigationTree',
  listeners: {
    selectionchange: 'onNavigationTreeSelectionChange'
  }
}

在 onNavigationTreeSelectionChange 处理程序上（在视图控制器上），您需要根据单击的节点属性创建新视图。类似于：

onNavigationTreeSelectionChange: function (tree, node) {
    console.log('onNavigationTreeSelectionChange');
    var tp = this.getPlanPresentationBar();
    var newView;
    if (node && node.get('extjsview')) {
        switch (node.get('extjsview')) {
            case 'Category':
                newView = new MyApp.view.Category({});
                break;
            case 'sync.Sync':
                newView = new MyApp.view.sync.Sync({});
                break;
            default:
                break;
        }
        tp.add(newView);
    }
},

在这个例子中，我们使用节点的属性 extjsview 来知道要创建哪个视图（如果检查用户是否单击了Category 节点）。在示例代码中，newView 被添加到现有的选项卡面板中，但这实际上取决于应用程序的其余部分。

如Tarabass, you should check the Dashboard example所述。

单击 ExtJS 中的树列表节点后如何生成视图？

How to generate view, after click on treelist node in ExtJS?

javascript

extjs

treelist

extjs6