点击ExtJS中的treelist节点后如何生成视图？

Question

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

应用

- ＆GT;查看 - ＆gt;主要 - ＆gt; MainController.js

- ＆GT;查看 - ＆gt;类别 - ＆gt; CategoriesController.js

经典：

- ＆GT;查看

- ＆GT;主要 - ＆gt; Main.js

- ＆gt;类别 - ＆gt; Categories.js

我使用treelist。

现在，我希望当用户点击treelist节点时生成视图。例如：单击类别节点时，生成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来了解要创建的视图（如果检查用户是否单击了“类别”节点）。在示例代码中，newView被添加到现有的tabpanel中，但它实际上取决于应用程序的其余部分。

正如Tarabass所述，您应该查看Dashboard example。