ExtJs4 formPanel从后台加载json数据

       首先将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的控制台信息