Extjs5.1: Form loads complex JSON

1, the simplest way.

If the JSON data format is loaded similar to the following format:

{  "Success": True,  "data": {    "name": "Zhuangweihuang",    "age": +,    "email": "[email protected]"  }}

Then the form form is the simplest to load. Note This JSON format, first of all, the required field is "Success", the form table Form is successful, all through this field to judge (although the field name can be defined by itself, but generally with the default success), if you do not pass this field, the form is considered to be a failure to load, So the data is not displayed. Take a look at the "Data" field and why "data" is used here, because the form form defaults to loading the data in the "Data" field. So the JSON data format is assembled in the form default format, which is the simplest form to load.

Define a form

var myForm = ext.create (' Ext.form.Panel ', {    height:200,    width:400,    layout: ' column ',    border:true,    margin:20,    title: ' Form ' loading complex JSON data,    bodypadding:10,    defaults:{        xtype: ' TextField ',        columnwidth:0.5,        Margin:5,        labelwidth:40    },    items:[        {           fieldlabel: ' name ',           name : ' Name '        }, {            Fieldlabel: ' Age ',            name: ' Ages '        }, {            Fieldlabel: ' mailbox ',            name: ' Email '        }    ]});

Loading JSON data

Myform.getform (). Load ({    URL: ' Data.json ',    success:function () {        Ext.Msg.alert ("Hint", "Download JSON data succeeded");    } ,    failure:function () {        Ext.Msg.alert ("Hint", "Download JSON data Failed");}    });

Effect

2. Use a custom field to load the data.

As we said above, when the form loads the data, the default data source field is "Data" and the default loading is "Success", so here's how to change the names of those fields.

For example, the following JSON format

{  "mysuccess": true,  "person": {    "name": "Zhuangweihuang",    "age": +, "    email": [Email protected ]"  }}

We changed the default fields for success and data to mysuccess and person, and to have the form read the default fields that we have customized, we just need to configure the form to perform the action (a bit of a detour) for it to read the JSON data.

reader:{    type: ' JSON ',    model: ' MyModel ',    rootproperty: ' person ',    successproperty: ' Mysuccess '},

The model definition used inside

Ext.define (' MyModel ', {        extend: ' Ext.data.Model ', fields        : [' name ', ' age ', ' email '    )});

This way the child form can read the JSON data above.

3. Read complex JSON data

Modify the JSON data above slightly to make it a little more complicated:

{  "mysuccess": true,  "person": {"    name": {      "first": "Zhuang", "Last      ": "Weihuang"    },    " Age ":"    Email ":" [email protected]}  }

Looking at this JSON data, we split the name into two fields, first and last, so our form also has to be changed a little bit, changing the name field to the first name and name, and modifying the items configuration in the form.

items:[    {       fieldlabel: ' Surname ',       name: ' First '    }, {        fieldlabel: ' name ',        name: ' Last '    }, {        Fieldlabel: ' Ages ',        Name: ' Age '    }, {        fieldlabel: ' email ',        name: ' Email '    }]

Effect

The next thing to do is to load first and last into the "First name" and "First name" box above. Just modify the model when reading the data.

Ext.define (' MyModel ', {    extend: ' Ext.data.Model ', fields    : [        {name: ' First ', Mapping: ' Name.first '},        {name: ' Last ', Mapping: ' Name.last '},        ' age ', ' email '    ]});

Here we use the mapping configuration, the effect is obvious, is the name of the field first and last mapped out to the outside first and last, so that the form reading JSON can read the data of the two fields.

Effect

The same method can be used for grids, tree, DataView and so on in the store (Stroe need to configure the model) or model components.

The third case of source download

Extjs5.1: Form loads complex JSON