ExtJS4加载FormPanel数据的几种方式

我们做web应用最多的就是处理表单，extjs为我们提供了很多处理表单的功能，很多初学者疑惑怎么加载表单数据，到底能用什么方式加载？本文中，我将我自己实验过的进行一下总结，自己备忘，也希望能帮助到其他人。1.使用loadRecord加载Model数据。这也是我目前用的较多的。
比如有个角色管理，定义如下model“：Ext.define（"roleModel", {
extend: "Ext.data.Model",
fields: [
{ name: "id", mapping: "id" },
{ name: "roleName", mapping: "roleName" },
{ name: "status", mapping: "status" },
{ name: "remark", mapping: "remark" }
],
idProperty: "id"
}）; 定义一个表单如下：var formId = "roleEditForm";
var formPanel = Ext.create（"Ext.form.Panel",{
id: formId,
height: 270,
bodyStyle: "padding-top:20px;",
url: "role/save.action",
method: "POST",
defaults:
{
width: 200,
labelStyle: "padding-left:20px;",
border: false
},

items: [
{
name: "roleName",
fieldLabel: "角色名称",
xtype: "textfield",
maxLength:40
}
,
{

name: "remark",
fieldLabel: "备注",
xtype: "textfield",
width:300,
maxLength:200
}
,

{
name: "id",
xtype: "hidden",
value:id
}

,
{
name: "method",
xtype: "hidden",
value:id==0？"save":"update"
}
]
}）那么我加载数据的时候使用loadRecord方式：var form = Ext.getCmp（formId）;
var id=1;//角色的id
Ext.ModelMgr.getModel（"roleModel"）.load（ id,{
url:"role/getinfo.action",
success: function（obj） {
form.loadRecord（obj）;
}
}）; 2.第二种是给formpanel增加reader的方式。
在第一种方法中不需要reader，只是把record中的字段与表单中字段的name对应起来，就可以加载数据了。reader方式则需要生成一个reader对象，利用reader去匹配字段，达到填充数据的目的form不说了，首先定义reader：var roleReader = Ext.create（"Ext.data.reader.Json", {

root : "data",//数据的根属性，如果只是纯数据对象，没有什么root，那写""（空串）或者空着就行
model :"roleModel"//使用的model
}）; 定义一个reader，reader中指定了要使用的model。然后表单中指定该reader：reader: roleReader , formPanel.load（{
url: "role/getinfo.action",
params: {"id":roleid}
}）; 本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-11/137004.htm