Extjs Tree and GRID content - extjs

Question

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