Extjs5.1(10)：Form加载复杂Json

1、最简单的方式。

 

如果加载的json数据格式类似于下面这种格式：

{
  "success":true,
  "data":{
    "name":"zhuangweihuang",
    "age":25,
    "email":"[email protected]"
  }
}

那么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":"[email protected]"
  }
}

我们修改了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":"[email protected]"
  }
}

看一下这个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的组件中。

第三种情况的源码下载

交流群：170198012