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

Question

以下是我的表单定义，里面我想分配项的值属性来自json文件，它具有关于fieldLabel，name，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); 
      } 
     }); 
    } 
});