Extjs создает элементы формы с json store

Question

Я создал вид панели формы, и я создам некоторые элементы формы на этой панели. Связь с магазином, контроллером и моделью отлично работает, но как я могу создать элементы в представлении?

Json массив (извлекается из внешней службы):

{ 
"data": [ 
    { 
     "name": "ff", 
     "xtype": "textfield", 
     "allowBlank": false, 
     "fieldLabel": "labelText1" 
    }, 
    { 
     "name": "fsdsdf", 
     "xtype": "textfield", 
     "allowBlank": false, 
     "fieldLabel": "labelText2" 
    } 
], 
"msg": "Unknown", 
"success": true 
} 

Магазин:

Ext.define('myApp.store.Forms', { 
extend: 'Ext.data.Store', 
alias: 'store.Form', 
model: 'myApp.view.FormModel', 

constructor: function(config) { 
    var me = this; 

    config = config || {}; 

    me.callParent([Ext.apply({ 
     autoLoad: true, 

     proxy: { 
      type: 'ajax', 
      url: 'url_to_service', 

      reader: { 
       type: 'json', 
       rootProperty: 'data', 
       successProperty : 'success' 
      } 
     },   

     storeId: 'formStore' 

    }, config)]);  

    // console.error("store loaded"); 
    // console.info(me); 
} 
}); 

модель

Ext.define('myApp.view.FormModel', { 
extend: 'Ext.data.Model', 

data: { 
    name: 'myApp' 
} 
}); 

Контроллер

Ext.define('myApp.view.FormController', { 
extend: 'Ext.app.ViewController', 
alias: 'controller.form', 

init: function(application) { 
    var store = new myApp.store.Forms(); 

    store.on("metachange", metaChanged, this); 

    function metaChanged(store, meta) { 
     var grid = Ext.ComponentQuery.query('form')[0]; 
     grid.fireEvent('metaChanged', store, meta); 
    }; 

    this.control({ 
     "form": { 
      metaChanged: this.handleStoreMetaChange 
     } 
    });  
}, 

handleStoreMetaChange: function(store, meta) { 
    var form = Ext.ComponentQuery.query('form')[0]; 
    form.reconfigure(store, meta.data); 
} 
}); 

По крайней мере вид, где я хочу, чтобы создать элементы из магазина.

Ext.define('myApp.view.Form', { 
extend: 'Ext.form.Panel', 
xtype: 'form', 

controller: "form", 

viewModel: { 
    type: "form" 
}, 

title: 'form', 
bodyPadding: 10, 
autoScroll: true, 

defaults: { 
    anchor: '100%', 
    labelWidth: 100 
}, 


// How can I add form items here? 


}); 

Answer 1

В вашей точки зрения вам необходимо создать функцию, которая соответствует form.reconfigure (магазин, meta.data) вызова вы делаете в вашем контроллере.

И в этой функции вы можете позвонить в форму . Добавить функцию, чтобы добавить элементы в форму. Поскольку вы уже поставляете параметры типа xtype и конфигурации в структуре данных, каждый элемент может быть передан функции добавления. Это будет выглядеть как приведенный ниже код ...

reconfigure: function(store, data) {     
    var me = this; 
    Ext.each(data, function(item, index) { 
     me.add(item); 
    }); 
} 

Я сколотил Example Fiddle, который показывает эту работу. Я просто высмеивал загрузку данных и событие metachange, поскольку было легче получить демоверсию.