首先将js代码粘贴上来
Ext.require(['Ext.form.*', 'Ext.data.*']);
//定义model
Ext.define('lcm.formItem', {
extend : 'Ext.data.Model',
fields : [{
name : 'name',
mapping : 'name'
}, {
name : 'age',
mapping : 'age'
}]
});
//定义formPanel
Ext.define('lcm.SouthCenter', {
extend : 'Ext.form.Panel',
renderTo : 'form',
frame : true,
title : 'Form',
width : 340,
bodyPadding : 5,
waitMsgTarget : true,
fieldDefaults : {
labelAlign : 'right',
labelWidth : 85,
msgTarget : 'side'
},
//初始构造
initComponent : function() {
this.items = [{
xtype : 'textfield',
fieldLabel : '姓名',
name : 'name'
}, {
xtype : 'textfield',
fieldLabel : '年龄',
name : 'age'
}];
//以数组形式读取数据（这种方法可以得，请自行测试）
// this.reader = Ext.create('Ext.data.reader.Array', {
// model : 'lcm.formItem',
// record : 'map',
// implicitIncludes : false
// });
//以json形式读取数据
this.reader = Ext.create('Ext.data.JsonReader', {
root : "map",
model : 'lcm.formItem'
});
this.callParent(arguments);
}
});
Ext.onReady(function() {
var app = new lcm.SouthCenter();
app.getForm().load({
url : 'myFormAction!load',
waitMsg : 'Loading...'
})
});
第一个需要注意的是model里面的fileds，一定要与formPanel的textfield一一对应，
第二个需要注意的是render里面一定要引入model，不能直接定义成
reader: new Ext.data.JsonReader({
root: 'map',
fields: ['name','age'] //JSON数据解析
})
这种形式，这样的话会报me.model undefined错误。
现在把后台action代码传上
package com.demo.action;
import java.util.HashMap;
import java.util.Map;
public class MyFormAction {
private boolean success;
private Map map = new HashMap();
public String load() {
//如果没有success=true，读取json数据会出错
success = true;
map.put("name", "liu");
map.put("age", 12);
// System.out.println("why!");
return "load";
}
public Map getMap() {
return map;
}
public void setMap(Map map) {
this.map = map;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
}
再将struts.xml中的配置传上
<action name="myFormAction" class="myFormAction">
<result name="load" type="json">
<param name="includeProperties">success,map.*</param>
</result>
</action>
这样就大功告成，现在附截图一张
firebug的控制台信息
