Question

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

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

如下所示，我试图通过自定义配置和自动生成的“应用”功能来实现此目的。

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

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

我收到了这个错误：

TypeError：项目未定义 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
        }
    ]
});

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

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

1 个答案: