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.