javascript - 在ExtJS中单击treelist节点后如何生成视图？

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已经提到的，您应该查看Dashboard 示例。