Extjs creates multiple controllers to implement multi-module MVC dynamic loading perfect cracked version

The idea is as follows: Create userController and roleController dynamically in moduleController. userController and rolecontroller retain the mvc mode to manage the components of their respective modules (of course, userController and roleController can also dynamically create their submodules .) My...

The idea is as follows:

In moduleController, userController and roleController are dynamically created. userController and rolecontroller retain the mvc mode to manage the components of their respective modules (of course, userController and roleController can also dynamically create their submodules .)

My moduleController is actually the border module at the outermost layer. The menu in moduleController is the menu on the left, such as "user management" and "Subsystem Management, when you click User management or Subsystem Management, the controller corresponding to the module is dynamically loaded. The current Code does not correspond to the image, because the current code is relatively new and uses the old image. The principle is the same. For example

 

 

Modification steps:

1: first

Ext. application ({
Name: 'iv ',
AppFolder: 'js/app ',
AutoCreateViewport: true,
Controllers :[
'Config. lelecontroller', 'config. user. usercontroller', 'config. system. usercontroller''
],
Launch: function (){
Ext. tip. QuickTipManager. init ();
}
});

Changed:

Var application = new Ext. app. Application ({
Name: 'iv ',
AppFolder: 'js/apps/mainapp ',
AutoCreateViewport: true,
// Requires: ['module. subsystemmodule', 'module. usermodule'],
Controllers :[
// 'Config. lelecontroller', 'config. user. usercontroller'
'Lelecontroller'
],
Launch: function (){
// Ext. Msg. alert ('1', '123 ');
Ext. tip. QuickTipManager. init ();
}
});

Description: defines the application. Facilitate controller reference. (You do not need to define it, because the init method in the controller can get the reference of applicaiton)

Then, in the moduleController's button menu, click the code in the processing function as follows:

OnSelectionChange: function (thisview, record, eOpts ){
Var self = this;
Var selected = record;
If (selected. get ('module') = 'usermodule '){
Ext. require ("IV. controller. UserController", function (){
Var userController = application. getController ('usercontroller ');
UserController. init (application );
}, Self );
} Else if (selected. get ('module') = 'rolemodule '){
Ext. require ("IV. controller. RoleController", function (){
Var roleController = application. getController ('rolecontroller ');
RoleController. init (application );
}, Self );
}
}

Note:

Ext. require ("IV. controller. UserController", function (){
Var userController = application. getController ('usercontroller ');
UserController. init (application );
}, Self );

Load userController first. After loading, instantiate UserController using the getController method of application and register UserController to application. Then manually call the init method of the controller. Because you dynamically load the controller, if the init method is not executed here to pass the application, the init method in the controller will not be automatically executed. This is also the case in the application source code .. So I did the same.

2: then:

The init method in my userController is as follows:
Init: function (app ){
This. control ({
'Usergrid ':{
'Itemclick': this. gridItemClickFun
}
});
Var center = app. getController ('lelecontroller'). getCenter ();
Var userPanel = center. child ('userpanel ');
If (! UserPanel ){
Var userPanel = Ext. widget ('userpanel ', {title: 'System Settings> User management '});
Center. add (userPanel );
Center. setActiveTab (userPanel );
} Else {
Center. setActiveTab (userPanel );
}
},

I need to get the reference of moduleController through application, and obtain the center component (a tabPanel) based on moduleController ). Then, add the UserPanel in the corresponding module of UserController to the tab of the center component. (This userPanel is similar to viewPort, userPanel, and sub-elements in moduleController. It can be managed in userController In the mvc mode .). Then the code logic in userController follows the normal MVC logic.