Extjs create form items with json store

Question

I have created a form panel view and I will create some form items iside this panel. The communication to the store, controller and model works fine but how can I create the items in the view?

Json array (retrieved from external service):

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

Store:

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

model

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

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

Controller

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

At least the view where I want to create the items from the store.

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

Within your view you'll need to create a function that matches the form.reconfigure(store, meta.data) call you are making in your controller.

And in that function you can call the form's add function to add items to the form. As you are already supplying the xtype and configuration parameters in the data structure each item can be passed to the add function as it. It would look something like the below code...

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

I have knocked together an Example Fiddle that shows this working. I just mocked out the loading of the data and 'metachange' event as it was easier to get the demo working.