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>

 最终效果如下:



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