mminnie
11 Feb 2012, 7:14 PM
I am getting a better grasp on ExtJS 4 and the MVC pattern. I'd like to know from you experts if what I am thinking is the "best practice" for the controller creating views.
As an example, say I have an app with one main viewport containing all other application views such as the menu toolbar, buttons, grids, etc. One of the main viewport buttons should create a tab in a tabpanel to display a list of the users. This user list view is controlled by a User controller and the tabpanel is contained in the mainviewport and controlled by the mainviewport controller.
At first, I had code in the User controller creating the user list then adding it to the mainviewport tabpanel from within the User controller. I'm thinking the best practice should have the logic all contained in controller controlling the items in the mainviewport view. Something like:
Mainviewport Controller
Ext.define('LB.controller.Mainviewport', {
extend: 'Ext.app.Controller',
views: ['Mainviewport'],
....
init: function() {
this.control({
'mainviewport button[action=showuserlist]': {
click: this.onUserlistClick
}
});
....
onUserlistClick: function(button) {
// Create tab in view
userlisttab = this.getMaintabpanel().add({
title: 'User List',
});this.getController('Users').showUserList(userlisttab) // Have user controller add created component to passed in target
}
....
User controller
Ext.define('LB.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],
stores: ['Users'],
models: ['User'],
......
showUserList: function(target) {
target.add(Ext.create('LB.view.user.List')); // Create view here and add to "target" container
},
....
This keeps all other views (ie the Mainviewport tabpanel) hidden from the User controller and user.List view. Both methods would work, I'm just thinking the method listed above makes the User controller less coupled with the mainviewport.
Is this good thinking?
As an example, say I have an app with one main viewport containing all other application views such as the menu toolbar, buttons, grids, etc. One of the main viewport buttons should create a tab in a tabpanel to display a list of the users. This user list view is controlled by a User controller and the tabpanel is contained in the mainviewport and controlled by the mainviewport controller.
At first, I had code in the User controller creating the user list then adding it to the mainviewport tabpanel from within the User controller. I'm thinking the best practice should have the logic all contained in controller controlling the items in the mainviewport view. Something like:
Mainviewport Controller
Ext.define('LB.controller.Mainviewport', {
extend: 'Ext.app.Controller',
views: ['Mainviewport'],
....
init: function() {
this.control({
'mainviewport button[action=showuserlist]': {
click: this.onUserlistClick
}
});
....
onUserlistClick: function(button) {
// Create tab in view
userlisttab = this.getMaintabpanel().add({
title: 'User List',
});this.getController('Users').showUserList(userlisttab) // Have user controller add created component to passed in target
}
....
User controller
Ext.define('LB.controller.Users', {
extend: 'Ext.app.Controller',
views: ['user.List'],
stores: ['Users'],
models: ['User'],
......
showUserList: function(target) {
target.add(Ext.create('LB.view.user.List')); // Create view here and add to "target" container
},
....
This keeps all other views (ie the Mainviewport tabpanel) hidden from the User controller and user.List view. Both methods would work, I'm just thinking the method listed above makes the User controller less coupled with the mainviewport.
Is this good thinking?