EXTJS：如何从JSON文件加载Ext.form.panel项目配置

Question

下面是我的表单定义，在其中我想为json文件中的items属性分配值，其中包含有关fieldLabel，名称，xtype等的信息，所以有什么办法可以做到这一点？

Ext.define('com.myproject.view.myform', {
extend:'Ext.form.Panel',    
alias: 'widget.myform',
xtype : 'myform',
autoShow : true,
width: 500,
height: 400,
title: 'Foo',
floating: true,
closable : true,
items: [{
    fieldLabel: 'ID',
    name: 'filterID',
    xtype : 'textfield',
    allowBlank: false
},{
    fieldLabel: 'LABEL',
    name: 'filterLabel',
    xtype : 'textfield',
    allowBlank: false
}] });

JSON文件

{"itemsConfiguration": [{
    "fieldLabel": "ID",
    "name": "filterID",
    "xtype" : "textfield",
    "allowBlank": false
},{
    "fieldLabel": "LABEL",
    "name": "filterLabel",
    "xtype" : "textfield",
    "allowBlank": "false"
}]}

Answer 1

Ext.define('com.myproject.view.myform', {
    extend:'Ext.form.Panel',    
    alias: 'widget.myform',
    xtype : 'myform',
    autoShow : true,
    width: 500,
    height: 400,
    title: 'Foo',
    floating: true,
    closable : true,
    initComponent:function() {
        var me = this,
            args = arguments;
        Ext.Ajax.request({
            // TODO fill url etc.
            callback:function(response) {
                Ext.apply(me,{
                    items:Ext.decode(response.responseText).itemsConfiguration
                });
                me.callParent(args);
            }
        });
    },
});

Answer 2

Ext.define('com.myproject.view.myform', {
    extend:'Ext.form.Panel',    
    alias: 'widget.myform',
    xtype : 'myform',
    autoShow : true,
    width: 500,
    height: 400,
    title: 'Foo',
    floating: true,
    closable : true,
    initComponent:function() {
        var me = this;

        me.callParent(arguments);

        Ext.Ajax.request({
            url: 'path/to/endpoint',
            callback:function(response) {
                var obj = Ext.decode(response.responseText),
                    items = obj.itemsConfiguration;

                Ext.suspendLayouts();
                Ext.applyIf(me,{
                    items: items
                });
                me.updateLayout(); // Will calculate margins/paddings/etc.
                Ext.resumeLayouts(true);
            }
        });
    }
});