Ext JS 4 - How to display other views inside a view? - model-view-controller

Question

In an MVC style Ext JS 4 application, assuming I have a single controller/view/store/model and that loads up properly- for an example, let's say this example is my code base.
My application loads up a view with a grid (list of Users), then when a row is clicked it opens and edit (User) view with a form.
Now, I want to add additional views to be displayed inside that form.
For example, I want to show a 'last 10 logins' (a list of activity records for the user) below the fields in the User form. I will have a separate view/controller/model/store for 'ActivityLog'. So I need to create the ActivityLog List view/controller and place it inside my User view (it will also have it's own code/logic to handle clicks on those records in it's grid, etc.).
Is that the correct approach?
Would the User controller load the view/controller of ActivityLog and somehow place it in to the User edit view, or do I have config data directly inside the User edit view that loads it in ?

Answer 1

Ok. Probably you can use something like this
// Navigation controller
Ext.define('App.controller.Navigation', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['navigation.TabHost'],
init: function() {
this.control({
'tabhost': {
'render': function(tabHost) {
// Grid panels are panels too. So It does not make any sense to use additional container.
tabHost.add(Ext.create('App.view.users.List'));
tabHost.add(Ext.create('App.view.activitylogs.List'));
}
}
}
});
// Users controller
Ext.define('App.controller.Users', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['users.List'],
init: function() {
this.control({
'userslist': {
'render': function(gridPanel) {
console.info('Im here');
}
}
}
});
// ActivityLog controller
Ext.define('App.controller.ActivityLog', {
extend: 'Ext.app.Controller',
models: [],
stores: [],
views: ['activitylogs.List'],
init: function() {
this.control({
'loglist': {
'render': function(gridPanel) {
console.info('Im here');
}
}
}
});
// Also you should have tree view files
// navigation.TabHost
Ext.define('App.view.navigation.TabHost', {
extend: 'Ext.tab.Panel',
alias: 'widget.tabhost',
initComponent: function() {
// ......
}
});
// users.List
Ext.define('App.view.users.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userslist',
initComponent: function() {
// ......
}
});
// activitylog.List
Ext.define('App.view.activitylogs.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.logslist',
initComponent: function() {
// ......
}
});
Navigation controller will create widges and insert them to its tabhost.
But ActivityLog and Users Controllers will manipulate their views.

Answer 2

Would the User controller load the view/controller
Yes, you can do this.
User controller can use view from another controller. In other case controller can listen to view which was added in the another controller.
First off all you should register controllers in app.js
Ext.application({
name: 'App',
autoCreateViewport: true,
appFolder: 'js/App',
controllers: [
'User',
'ActivityLog'
],
launch: function() {
}
});
After that all views/stores/models, which was described in the controllers files, will be loaded automatically.
You will have ability to manipulate (add/remove) views wherever you want. But controllers will be listening to the views that you definitely specified.