Question

在一个MVC风格的Ext JS 4应用程序中，假设我有一个控制器/视图/存储/模型并且正确加载 - 例如，让我们说this示例是我的代码库

我的应用程序使用网格（用户列表）加载视图，然后单击一行时，它会打开并使用表单编辑（用户）视图。

现在，我想添加要在该表单中显示的其他视图。

例如，我想显示最近10次登录＆＃39;用户表单中字段下方（用户的活动记录列表）。我将为ActivityLog＆＃39;提供单独的视图/控制器/模型/商店。因此，我需要创建ActivityLog List视图/控制器并将其放在我的用户视图中（它还将拥有它自己的代码/逻辑来处理其中网格中的那些记录的点击等）。

这是正确的方法吗？

用户控制器是否会加载ActivityLog的视图/控制器并以某种方式将其放入用户编辑视图中，或者我是否在用户编辑视图中直接加载了配置数据？

Answer 1

确定。可能你可以使用这样的东西

//导航控制器

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

//用户控制器

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控制器

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

//你也应该有树视图文件

// 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() {
      // ......
    }
});

导航控制器将创建widges并将其插入其tabhost。

但ActivityLog和用户控制器将操纵他们的观点。

Answer 2

用户控制器是否会加载视图/控制器

是的，你可以这样做。

用户控制器可以使用来自其他控制器的视图。在其他情况下，控制器可以监听在另一个控制器中添加的视图。

首先，您应该在app.js中注册控制器

Ext.application({

    name: 'App',

    autoCreateViewport: true,

    appFolder: 'js/App',



    controllers: [

        'User',
        'ActivityLog'
    ],



    launch: function() {



    }

});

之后，将自动加载控制器文件中描述的所有视图/存储/模型。

您可以随时随地操作（添加/删除）视图。但是控制器会监听您明确指定的视图。

Ext JS 4 - 如何在视图中显示其他视图？

2 个答案: