ExtJs的Grid组件配合struts2返回json数据

第一次使用extjs的grid组件，简单做了一个分页条。主要目地是把数据库中的数据呈现到前端的grid中。过程记录如下

首先是JSP页面代码：

    <div id="grid" style="width:400px;height:300px"></div>

然后是JS代码：

Ext.onReady(function(){
 var cm = new Ext.grid.ColumnModel([
  {header:'编号', dataIndex:'id', width:250},
  {header:'名字', dataIndex:'name'},
  {header:'年纪', dataIndex:'age'},
  {header:'地址', dataIndex:'address'}
 ]);

 var store = new Ext.data.Store({
  proxy: new Ext.data.HttpProxy({url: path + '/index_query.action'}),
  reader: new Ext.data.JsonReader({
   totalProperty: "total",
   root: "rows"
  },[
     {name:'id'},
     {name:'name'},
     {name:'age'},
     {name:'address'}
  ])
 });
 
 var grid = new Ext.grid.GridPanel({
  renderTo: 'grid', // 渲染到id=grid在div
  autoHeight: true,
  store: store,
  cm: cm,
     width: 600,
     height: 300,
     frame: true,
     forceFit: true,
     stripeRows: true,
  bbar: new Ext.PagingToolbar({
   pageSize: 10,
   store: store,
   displayInfo: true,
   displayMsg: "显示{0}条到{1}条记录,一共{1}条记录",
   emptyMsg: "没有记录"
  })
 });
 
 // 如果配置了分页工具条,store.load()就必须在构造表格以后执行,否则分页工具条不起作用
 store.load({params:{start:0, limit:10}});
});

 

Action中的代码：

public class IndexAction extends BaseAction<Person> {

 private static final long serialVersionUID = 6187270463225630432L;

 @Resource
 private PersonService personService; // 用到了spring框架

 ExtGrid<Person> extGrid = new ExtGrid<Person>(); // 这里的ExtGrid只是一个简单的javaBean对象

 public ExtGrid<Person> getExtGrid() {
  return extGrid;
 }

 public void setExtGrid(ExtGrid<Person> extGrid) {
  this.extGrid = extGrid;
 }

 // limit 10
 // start 0
 private Integer start;
 private Integer limit;

 public void setStart(Integer start) {
  this.start = start;
 }

 public void setLimit(Integer limit) {
  this.limit = limit;
 }

 public String query() {
  System.out.println("start = " + start);
  System.out.println("limit = " + limit);
  List<Person> list = personService.findAll();
  extGrid.setRows(list);// 设置数据
  extGrid.setTotal(list.size()); // 设置总数
  return SUCCESS; // 这里要返回String , 如果方法是void的话，界面没数据返回
 }

}

 

struts.xml文件的配置（重点是返回JSON的配置）

<struts>
    <package name="json" namespace="/" extends="json-default">
        <action name="index_*" class="indexAction" method="{1}">
            <result type="json">
                <!-- 这里指定将被Struts2序列化的属性，该属性在action中必须有对应的getter方法 -->
                <param name="root">extGrid</param>
            </result>
        </action>
</package>

 最终效果如下:

经过查询了很多资料，才总结出这个做法。先记录下来，以后再慢慢改进。。。