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的组件中。
第三种情况的源码下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。