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

Question

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

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

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

例如，我想在用户表单的字段下方显示“最近 10 次登录”（用户的活动记录列表）。我将为“ActivityLog”拥有一个单独的视图/控制器/模型/存储。因此，我需要创建 ActivityLog 列表视图/控制器并将其放置在我的用户视图中（它还将有自己的代码/逻辑来处理网格中这些记录的点击等）。

这是正确的方法吗？

用户控制器是否会加载 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() {
      // ......
    }
});

导航控制器将创建小部件并插入他们到它的选项卡主机。

但是 ActivityLog 和用户控制器将操纵它们的视图。

Answer 2

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

？是的，你可以这样做。

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

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

Ext.application({

    name: 'App',

    autoCreateViewport: true,

    appFolder: 'js/App',



    controllers: [

        'User',
        'ActivityLog'
    ],



    launch: function() {



    }

});

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

您将能够随时随地操纵（添加/删除）视图。但是控制器将监听您明确指定的视图。