我们做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}
});