Using json data how to create form in sencha

Question

I want to read json data from file - content of the json file shown below

    {
    "form": {
        "fields" : [
                {
                    "field":"textfield",
                    "name": "username",
                    "constrain": "5-10",
                    "value": ""
                },
                { 
                    "field":"textfield",
                    "name": "password",
                    "constrain": "5-10",
                    "value": ""
                },
                { 
                    "field":"datepickerfield",
                    "name": "Birthday",
                    "constrain": "5-10",
                    "value": "new Date()"
                },
                { 
                    "field":"selectfield",
                    "name": "Select one",
                     "options":[
                        {"text": "First Option",  "value": 'first'},
                        {"text": "Second Option", "value": 'second'},
                        {"text": "Third Option",  "value": 'third'}
                        ]
                },

            ]    
      }
}

Model

    Ext.define('dynamicForm.model.Form', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'field', type: 'string'},
                {name: 'name', type: 'string'},
                {name: 'constrain', type: 'string'},
                {name: 'value', type: 'string'}
             ],
             hasMany: {model: 'dynamicForm.model.SelectOption', name: 'options'}
        }
    });

Ext.define('dynamicForm.model.SelectOption', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'text', type: 'string'},
            {name: 'value', type: 'string'}
         ]
    }
});

store

Ext.define('dynamicForm.store.FormStore', {
    extend : 'Ext.data.Store',
    storeId: 'formStore',
    config : {
        model : 'dynamicForm.model.Form',
        proxy : {
            type : 'ajax',
            url : 'form.json',

            reader : {
                type : 'json',
                rootProperty : 'form.fields'
            }
        },
        autoLoad: true
    }
});

This what i tried so for.

    var fromval = Ext.create('dynamicForm.store.FormStore');
    fromval.load(function (){
        console.log(fromval);
              // i added register view which having form panel with id "testForm"
            Ext.Viewport.add({
                xtype : 'register'
            });
        for(i=0; i< fromval.getCount(); i++) {
            console.log("------");
            Ext.getCmp('testForm').add({
                    xtype: fromval.getAt(i).data.field,
                    label: fromval.getAt(i).data.name,
                    value: fromval.getAt(i).data.value,
                    options: [
                        {text: "First Option",  value: "first"},
                        {text: "Second Option", value: "second"},
                        {text: "Third Option",  value: "third"}
                    ]
            });
        }
    });

two text fileds and date are woking good, but i don't know how to get options for select field from store, just heard coded now.

over all Based on the above json data, i need to create sencha form dynamically.

Answer 1

{
    "data":[
        {
            "xtype":"textfield",
            "title":"UserName",
            "name": "username"
        },
        { 
            "xtype":"textfield",
            "title":"password",
            "name": "password"
        },
        { 
            "xtype":"textfield",
            "title":"phone no",
            "name": "birthday"
        },
        { 
            "xtype":"textarea",
            "title":"address",
            "name": "address"
        }
    ]
}

Ext.define('dynamicForm.model.FormModel', {
        extend: 'Ext.data.Model',

        fields: ['field', 'name']
    });


Ext.define('dynamicForm.store.FormStore', {
    extend : 'Ext.data.Store',
    model : 'dynamicForm.model.FormModel',
    proxy : 
    {
        type : 'ajax',
        url : 'data/user.json',

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

        autoLoad: true
    }
});


Ext.define('dynamicForm.view.DynaForm',{
    extend:'Ext.form.Panel',
    alias:'widget.df1',

    items:[]

});

Ext.application({
    name:'dynamicForm',
    appFolder:'app',

    controllers:['Users'],

    launch:function(){
        Ext.create('Ext.container.Viewport',{

            items:[
                {
                    xtype:'df1',

                    items:[]
                }
            ]
        });
    }
});

Ext.define('dynamicForm.controller.Users',{
    extend:'Ext.app.Controller',

    views:['DynaForm'],
    models:['FormModel'],
    stores:['FormStore'],

    refs:[
    {
        ref:'form1',
        selector:'df1'
    }
    ],

    init:function(){
        console.log('in init');
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {

        var fromval=this.getFormStoreStore();
        var form=this.getForm1();
        fromval.load({
            scope: this,
            callback: function(records ,operation, success) {
                Ext.each(records, function(rec) {
                 var json= Ext.encode(rec.raw);
                 var response=Ext.JSON.decode(json);
                 for (var i = 0; i < response.data.length; i++) {
                    form.add({
                        xtype: response.data[i].xtype,
                        fieldLabel: response.data[i].title,
                        name: response.data[i].name
                        });
                    }
                    //form.add(Ext.JSON.decode(json).data);
                    form.doLayout();
                });
            }
        });
    }
});

Answer 2

Better to follow MVC structure:

Create a model:

Ext.define('MyApp.model.FormModel', {
extend: 'Ext.data.Model',
config: {
    fields: ["field","name"]
}
});

A store with proxy:

Ext.define('MyApp.store.FormStore',{
extend: 'Ext.data.Store', 
config:
{
    model: 'MyApp.model.FormModel',
    autoLoad:true,
    proxy:
    {
        type: 'ajax',
        url : 'FormData.json', //Your file containing json data
        reader:
        {
                rootProperty:'form.fields'
        }
    }
}
});

The formData.json file:

{
"form": {
    "fields" : [
            {
                "field":"textfield",
                "name": "username"
            },
            { 
                "field":"textfield",
                "name": "password"
            },
        ]    
  }
}

And then use the FormStore to fill the form data as you need.

Ext.define('MyApp.view.LoginPage', {
extend: 'Ext.form.Panel',
config: {
items:{
xtype:'fieldset',
layout:'vbox',
items:[{
        flex:1,
        xtype:'textfield',
        id:'namefield',
        placeHolder:'Username'
    },{
        flex:1,
        xtype:'passwordfield',
        id:'passwordfield',
        placeHolder:'Password'
    }]
},
listeners:{
    painted:function()
    {
        var store=Ext.getStore('FormStore');
        while(!store.isLoaded())
        {
            console.log("loading...");
        }

        var record=store.getAt(0);
        Ext.getCmp('namefield').setValue(record.data.name);
        Ext.getCmp('passwordfield').setValue(record.data.password);
    }
}
}
});

Answer 3

It will be done automatically if you insert it into any extjs component content :

var jsonValues =  "{
    "form": {
        "fields" : [
                {
                    "field":"textfield",
                    "name": "username"
                },
                { 
                    "field":"textfield",
                    "name": "password"
                },
            ]    
      }
}";

var panel = new Ext.Panel({
        id        : 'myPanel',
        items      : [jsonValues]
});

panel.show();