Extjs Tree and GRID content

问题

I have a simple Extjs (5.1.1) Tree menu:

var menu = new Ext.tree.Panel( {
    root: {
        text: 'My menu',
        expanded: true,
        listeners: {
            itemclick: function(s,r) {
                    alert(r.data.text);
            }
        },
        children: [{
            text: 'System',
            expanded: true,
            children: [{
                text: '',
                leaf: true
            }, {
                text: 'System Users',
                leaf: true
            }, {
                text: 'System Administrators',
                leaf: true
            }]
        }, {
            text: 'Settings',
            expanded: true,
            children: [{
                text: 'Passwords',
                leaf: true
            }, {
                text: 'Emails',
                leaf: true
            }, ]
        }, {
            text: 'Logs',
            leaf: true,
        }]
    }
});

Ext.application({
    name : 'MVC',
    launch : function() {
        Ext.create('Ext.container.Viewport', {
            extend: 'Ext.container.Viewport',
            layout: 'border',
            items: [
                {
                    title: 'North',
                    region: 'north',
                    height: 50,
                    xtype: 'container'
                },
                {
                    title: 'Menu',
                    region:'west',
                    floatable: false,
                    items: menu,
                    width: 300
                },
                {
                    title: 'Center',
                    region: 'center'
                }
            ]    
        });
    }
});

My problem: The contents (GRID) have some js file. And I would like click one of the tree menu than js load 'Center' item. But I don't know how. :-( Example system_users.js file: (This file should load on center when I click System Users on the Tree.)

var Users = {
    init: function  () {
        itemdblclick: this.editDocument
    },

    edit: function(grid, roWindex, e) {
        var id = grid.getStore().getAt(rowIndex);
        Users.openEditForm(id);
    },

    openEditForm: function(id){
        // form open
    }
};

Users.init();

Ext.application({
    name   : 'Users',
    launch : function() {
        Ext.widget({
            renderTo : Ext.getBody(),
            xtype    : 'grid',
            title    : 'Users',
            height   : 800,
            store    : {
                fields : [ 'login_id', 
                           'login_name', 
                           'login_firstname',
                           'login_middlename',
                           'login_lastname',
                           'login_email',
                           'login_mobile',
                           'login_status' ],
                autoLoad : true,
                  proxy: {
                      type: 'ajax',
                      api: {
                          read: 'http://users/select',
                          create: 'http://users/insert',
                          update: 'http://users/update',
                          destroy: 'http://users/delete'
                      },
                      reader: {
                          type: 'json',
                          successProperty: 'success',
                          root: 'data',
                          messageProperty: 'message'
                      },
                      writer: {
                          type: 'json',
                          writeAllFields: false,
                          root: 'data'
                      }
                  }
            },
            columns: {
                items: [
                    { text: 'ID', dataIndex: 'login_id', editor: 'textfield', width: 200  },
                    { text: 'Login Name', dataIndex: 'login_name', editor: 'textfield', width: 200  },
                    { text: 'Firstname', dataIndex: 'login_firstname', editor: 'textfield', width: 200  },
                    { text: 'Middlename', dataIndex: 'login_middlename', editor: 'textfield', width: 200  },
                    { text: 'Lastname', dataIndex: 'login_lastname', editor: 'textfield', width: 200  },
                    { text: 'Email', dataIndex: 'login_email', editor: 'textfield', width: 200  },
                    { text: 'Mobile', dataIndex: 'login_mobile', editor: 'textfield', width: 200  },
                    { text: 'Status', dataIndex: 'login_status', editor: 'textfield', width: 200 }
                ]
            },
            listeners: {
                itemdblclick: function(dv, record, item, index, e) {
                    // This is row index
                    alert(index);
                }
            }
        })
    }
});

来源：https://stackoverflow.com/questions/31129529/extjs-tree-and-grid-content