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

Posted 2023-02-26

【中文标题】Ext JS 4 - 如何在视图中显示其他视图？

【英文标题】：Ext JS 4 - How to display other views inside a view?

【发布时间】：2011-11-29 14:18:25

【问题描述】：

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

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

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

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

这是正确的方法吗？

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

【参考方案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');
                    
                
        
    );

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

// 导航.TabHost

Ext.define('App.view.navigation.TabHost', 
    extend: 'Ext.tab.Panel',
    alias: 'widget.tabhost',
    initComponent: function() 
      // ......
    
);

// 用户列表

 Ext.define('App.view.users.List', 
        extend: 'Ext.grid.Panel',
        alias: 'widget.userslist',
        initComponent: function() 
          // ......
        
    );

//活动日志列表

Ext.define('App.view.activitylogs.List', 
    extend: 'Ext.grid.Panel',
    alias: 'widget.logslist',
    initComponent: function() 
      // ......
    
);

导航控制器将创建小部件并将它们插入到它的 tabhost。

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

【讨论】：

这看起来很有希望，但是 'tabhost': 'render': 在 App.controller.Navifation 中似乎没有被我调用（即使我可以看到它在屏幕上绘制），你确定这是正确的吗？

很好的来源，很有帮助！

【参考方案2】：

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

是的，你可以这样做。

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

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

Ext.application(

    name: 'App',

    autoCreateViewport: true,

    appFolder: 'js/App',



    controllers: [

        'User',
        'ActivityLog'
    ],



    launch: function() 



    

);

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

您将能够在任何地方操作（添加/删除）视图。但控制器会监听您明确指定的视图。

【讨论】：

这是有道理的，但如果你能进一步解释它，那就太好了。如果您将“导航”控制器添加到您的控制器（在您的示例中）并且有一个带有选项卡面板和 2 个选项卡的视图，该怎么办。然后，您将如何从 Navigation 控制器指定 User 和 ActivityLog 视图出现在每个选项卡中？