Extjs5.1(10)：Form載入複雜Json

Extjs5.1(10)：Form載入複雜Json

1、最簡單的方式。

 

如果載入的json資料格式類似於下面這種格式：

 

{  success:true,  data:{    name:zhuangweihuang,    age:25,    email:1234567@qq.com  }}

 

那麼form表單載入起來是最簡單的。注意一下這個json格式，首先，必需要的欄位是“success”，form表單載入是否成功，都是通過這個欄位來判斷（雖然欄位名可以自己定義，但一般就用預設的success），如果不傳這個欄位，form就認為是載入失敗，所以就不會顯示資料。再看一下“data”這個欄位，這裡為什麼使用“data”，因為form表單預設載入“data”欄位中的資料。所以以上的json資料格式，都是以form預設的格式組裝的，這種格式form載入起來也是最簡單的。

 

定義一個form

var myForm = Ext.create('Ext.form.Panel',{    height:200,    width:400,    layout:'column',    border:true,    margin:20,    title:'載入複雜json資料的form',    bodyPadding:10,    defaults:{        xtype:'textfield',        columnWidth: 0.5,        margin:5,        labelWidth:40    },    items:[        {           fieldLabel:'姓名',           name:'name'        }, {            fieldLabel:'年齡',            name:'age'        }, {            fieldLabel:'郵箱',            name:'email'        }    ]});

 

載入json資料

myForm.getForm().load({    url: 'data.json',    success:function(){        Ext.Msg.alert(提示,下載json資料成功);    },    failure:function(){        Ext.Msg.alert(提示,下載json資料失敗);    }});

效果

 

 

2、使用自訂的欄位載入資料。

上面我們講了，form載入資料時，預設資料來源的欄位是“data”，預設載入是否成功的欄位是“success”，那麼下面講如何改變這些欄位的名稱。

例如下面的json格式

{  mysuccess:true,  person:{    name:zhuangweihuang,    age:25,    email:1234567@qq.com  }}

我們修改了success和data的預設欄位，改為mysuccess和person，要讓form讀取我們自訂的這些預設欄位，只需要在form裡面為其配置讀取json資料時執行的動作（有點繞口）。

 

reader:{    type:'json',    model:'myModel',    rootProperty : 'person',    successProperty:'mysuccess'},

裡面使用到的model定義

 

 

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

 

這樣子form就能夠讀取上面的json資料了。

 

3、讀取複雜的json資料

稍微修改一下上面的json資料，讓其稍微複雜一點：

{  mysuccess:true,  person:{    name:{      first:zhuang,      last:weihuang    },    age:25,    email:1234567@qq.com  }}

看一下這個json資料，我們把name拆分成兩個欄位，first和last，所以我們的form同時也得稍作一下改變，把姓名這個欄位變成姓和名，修改form中的items配置。

items:[    {       fieldLabel:'姓',       name:'first'    }, {        fieldLabel:'名',        name:'last'    }, {        fieldLabel:'年齡',        name:'age'    }, {        fieldLabel:'郵箱',        name:'email'    }]

效果

 

接下來要做的就是，把first和last載入到上面的“姓”和“名”框框中。只要修改讀取資料時的model就行了。

 

Ext.define('myModel', {    extend : 'Ext.data.Model',    fields : [        {name: 'first',mapping:'name.first'},        {name:'last',mapping:'name.last'},        'age','email'    ]});

 

這裡我們使用了mapping配置，作用顯而易見，就是把name中的欄位first和last映射出來到外面的first和last，這樣form在讀取json的時候就能讀取到這兩個欄位的資料。

 

效果

 

 

同樣的方法也可以用到grid、tree、dataview等等需要用到store(stroe中需要配置model)或者model的組件中。