如何将项目动态添加到 ExtJS 4.2.1 边框布局区域容器？答案

【问题标题】：How do I dynamically add items to ExtJS 4.2.1 border layout region containers?如何将项目动态添加到 ExtJS 4.2.1 边框布局区域容器？
【发布时间】：2014-05-20 02:19:59
【问题描述】：

我正在创建一个可重用的通用视图，它是一个具有边框布局和空的北、西和中心容器的容器。

我想使用这个通用视图，并为北、西和中心容器动态定义项目。

如下所示，我正在尝试通过自定义配置和自动生成的“应用”函数来做到这一点。

但 UI 中没有显示任何内容。

我在这里可能做错了什么？

我收到此错误：

类型错误：项目未定义 len = items.length,

提前致谢。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../../ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="../../ext-4.2.1.883/ext-all-debug.js"></script>
    <script src="app.js"></script>
</head>
<body></body>
</html>

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({

    name: 'APP',
    appFolder: '../simplemvcBorderLayout',
    autoCreateViewport: true
});

Ext.define('APP.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.appviewport',

    autoScroll: true,
    layout: 'fit',

    requires: [
        'view.Main'
    ],

    items: [{
        xtype: 'mainAppView',
        northItems: [{
            xtype: 'label',
            text: 'here'
        }],
        westItems: [{
            xtype: 'label',
            text: 'here'
        }],
        centerItems: [{
            xtype: 'label',
            text: 'here'
        }]
     }]
});

Ext.define('APP.view.Main', {
    extend: 'Ext.container.Container',
    alias: 'widget.mainAppView',

    autoScroll: true,
    layout: 'border',

    config: {
        northItems: null,
        westItems: null,
        centerItems: null
    },

    constructor: function(config) {
        this.initConfig(config);
        this.callParent(arguments);
    },

    applyNorthItems: function(northItems) {
        this.northItems = northItems;
        this.doLayout();
    },
    applyWestItems: function(westItems) {
        this.westItems = westItems;
        this.doLayout();
    },
    applyCenterItems: function(centerItems) {
        this.centerItems = centerItems;
        this.doLayout();
    },

    items: [
        {
            xtype: 'container',
            itemId: 'appHeaderContainer',
            region: 'north',
            height: 60,
            items: this.northItems
        },
        {
            xtype: 'container',
            itemId: 'appNavigationContainer',
            region: 'west',
            width: 85,
            items: this.westItems
        },
        {
            xtype: 'container',
            itemId: 'appContentContainer',
            region: 'center',
            items: this.centerItems
        }
    ]
});

【问题讨论】：

标签： extjs

【解决方案1】：

您的代码只添加对对象的引用，这就是为什么没有任何反应。在 Ext.js 中，您可以通过在父级上调用 .add() 来将项目添加到容器中。 See here.

基本上你需要为你想要添加孩子的区域获取初始容器，然后调用add()或remove()等。

容器中已创建的项目是混合集合，而不仅仅是配置对象的数组。

更新

这是一种更好的方法（虽然未经测试）。首先，我不会使用config 属性来保存初始项目配置。初始配置可以在类原型上（不是必需的），或者只是在创建类时添加（只是以某种方式在代码中记录它）。将子组件添加到区域时，始终可以通过其xtype 创建它们。 .add() 方法采用配置对象或创建的组件。无论哪种方式都可以。

Ext.define('APP.view.Main', {
    extend: 'Ext.container.Container',
    alias: 'widget.mainAppView',

    layout: 'border',

    northItems: null,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    itemId: 'appHeaderContainer',
                    region: 'north',
                    height: 60,
                    items: me.northItems
                }
            ]
        });

        me.callParent(arguments);
    },

    applyNorthItems: function(northItems) {
        this.down('#appHeaderContainer').add(northItems);
    }
});

【讨论】：

我添加的“项目”尚未创建。这是一个动态 UI，我在其中创建一个通用页面并在运行时添加项目配置。是否需要检测item的类型，实例化，然后调用add？
添加了示例代码。了解这一点的最佳方法是查看 Sencha 组件以及它们是如何做到的。
+1，OP中使用的方法根本不起作用，它试图在类定义时访问实例级成员。
我感觉你摇滚 Besri！您的代码似乎有效，并且可能今天早上为我节省了很多时间。感谢您提供示例代码！