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

Question

I have a Extjs project and files is as follows:

app:

-> view -> main -> MainController.js

-> view -> categories -> CategoriesController.js

classic:

-> view

-> main -> Main.js

->categories -> Categories.js

And I use treelist to this.

Now, I want when user click on treelist nodes a generate view. for example: When click on category node, generate Category.js view.

How can I do this?

Answer 1

You need to associate a listener to the treelist to handle the users's click event (on the view that includes the treelist). You can listen the selectionchange event.

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

On the onNavigationTreeSelectionChange handler (on the view controller), you need to create the new view, based on the clicked node properties. Something like:

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);
    }
},

Is this example, we use the property extjsview of the node to know which view to create (if check if the user clicked the Category node). In the example code, the newView is added to an existing tabpanel, but it really depends on the rest of your application.

As already mentioned by Tarabass, you should check the Dashboard example.