Question

我使用Ext Js创建一个需要动态的Web应用程序。我向服务器发出一个AJAX调用来获取要显示的数据但是在我收回数据之前我真的不知道它是什么。我已经看到了一些在应用程序（顶层）添加动态对象的示例，但由于结构可能很深，因此每个对象获取所需数据并在内部添加它们似乎更为明智。 / p>

在下面的示例中，我有一个小应用程序，它将始终显示几个按钮。我想在应用程序级别提供配置数据，这将指示它在启动时添加更多按钮。

这可能吗？我尝试过使用构造函数和initComponent，但是当me.add（components）被调用时，抛出异常是带有消息＆＃34; 0x800a01b6 - JavaScript运行时错误：对象不支持属性或方法＆＃ 39;插入＆＃39;＆＃34 ;.看起来我试图在我添加它的对象完全形成之前添加一个新对象。任何解决这个问题的想法都会非常受欢迎。

Ext.define('Ext.controls.ButtonBar', {
    extend: 'Ext.Container',///

    xtype: 'buttonbar',
    cls: 'buttonbar',
    width: window.width,
    height: 45,
    bodyPadding: 7,
    layout: { type: 'hbox', align: 'begin', },

    items: [
        { xtype: 'button', text: 'push me' },
        { xtype: 'button', text: 'push me too' }
    ],

    initComponent: function () {
        var me = this;
        // add the company image and application title
        var components = [];

        for (var i = 0 ; i < me.config.buttons.length ; i++) {
            var button = Ext.create('Ext.Button', { text: me.config.buttons[i].text });
            components.push(button);
        }

        me.add(components);
    },
});


Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.controls.ButtonBar', {
            renderTo: Ext.getBody(),
            height: 300,
            width: 300,
            config: {
                // I have already loaded a load of configuration data through an ajax call. It loads 
                // a structure of data and I want each object to identify what it needs rather than 
                // having to understand the full structure and work on it from the outside.
                buttons: [
                    { text: "Press Me, I'm dynamic" },
                    { text: "I'm dynamic too" },
                ]
            }
        });
    },
});

Answer 1

我已经查看了initComponent的文档，并意识到我错过了所需的callParent调用。当我添加它时，它停止获取上面报告的错误并显示屏幕上的所有按钮。看来，此调用完成了组件的创建，可供进一步使用。在上面的例子中，我需要在添加额外的子组件之前调用它。

事实上，我需要做一个更改才能看到添加的所有按钮，这是为了改变按钮栏的大小以便为控件腾出空间。

initComponent: function () {
    var me = this;
    me.callParent();   // << here's the change

    var components = [];
    for (var i = 0 ; i < me.config.buttons.length ; i++) {
        var button = Ext.create('Ext.Button', { text: me.config.buttons[i].text });
        components.push(button);
    }
    me.add(components);
},

如何使用Ext js从配置数据创建动态对象

1 个答案: