如何将项目动态添加到ExtJS 4.2.1边界布局区域容器中？_Extjs

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

extjs

如何将项目动态添加到ExtJS 4.2.1边界布局区域容器中？,extjs,Extjs,我正在创建一个可重用的通用视图，它是一个带有边框布局和空的north、west和center容器的容器我想使用这个通用视图，并为north、west和center容器动态定义项如下所示，我试图通过自定义配置和自动生成的“应用”函数来实现这一点但是UI中没有显示任何内容我可能做错了什么我得到了这个错误： TypeError:项目未定义 len=项目长度提前谢谢 <!DOCTYPE HTML> <html> <head> <meta ch

我正在创建一个可重用的通用视图，它是一个带有边框布局和空的north、west和center容器的容器

我想使用这个通用视图，并为north、west和center容器动态定义项

如下所示，我试图通过自定义配置和自动生成的“应用”函数来实现这一点

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

我可能做错了什么

我得到了这个错误：

TypeError:项目未定义 len=项目长度

提前谢谢

<!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
        }
    ]
});


应用程序
Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
名称：“应用程序”，
appFolder:“../SimpleMVCWBorderLayout”，
自动创建视口：true
});
Ext.define（'APP.view.Viewport'{
扩展：“Ext.container.Viewport”，
别名：“widget.appviewport”，
autoScroll：是的，
布局：“适合”，
要求：[
“查看主视图”
],
项目：[{
xtype:'mainAppView'，
项目：[{
xtype:'标签'，
文字：“这里”
}],
项目：[{
xtype:'标签'，
文字：“这里”
}],
中心项目：[{
xtype:'标签'，
文字：“这里”
}]
}]
});
Ext.define（'APP.view.Main'{
扩展：“Ext.container.container”，
别名：“widget.mainAppView”，
autoScroll：是的，
布局：“边框”，
配置：{
northItems:null，
westItems:null，
centerItems:空
},
构造函数：函数（配置）{
this.initConfig（config）；
this.callParent（参数）；
},
applyNorthItems:函数（northItems）{
this.northItems=northItems；
这个是doLayout（）；
},
应用程序评估项：功能（westItems）{
this.westItems=westItems；
这个是doLayout（）；
},
ApplyCenter项目：函数（centerItems）{
this.centerItems=centerItems；
这个是doLayout（）；
},
项目：[
{
xtype:'容器'，
itemId:'appHeaderContainer'，
地区：'北'，
身高：60，
项目：此项为“项目”
},
{
xtype:'容器'，
itemId:'appNavigationContainer'，
地区：'西部'，
宽度：85，
items:此为.westItems
},
{
xtype:'容器'，
itemId:'appContentContainer'，
地区：'中心'，
items：此为.centerItems
}
]
});

您的代码只添加了对对象的引用，这就是为什么什么都没有发生。在Ext.js中，通过调用父级上的

.add（）

将项目添加到容器中

基本上，您需要为要添加子项的区域获取初始容器，然后调用

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，我在其中创建一个通用页面，并在运行时添加配置项。我是否需要检测项目的类型、实例化，然后调用add？添加的示例代码。了解这一点的最好方法是查看Sencha组件以及它们是如何实现的。+1，OP中使用的方法根本不起作用，它试图在类定义时访问实例级成员。我感觉你像摇滚贝斯里一样！你的代码似乎很有效，今天早上可能为我节省了不少时间。谢谢你的示例代码！