Struts2与Ext JS数据表格GridPanel之间的数据传递
本帖介绍如何通过struts 2获取数据，把数据填充到Ext JS的数据表格组件GridPanel中，部分内容是参考网上的一些教程的。
首先，Struts 2和EXT JS之间的数据传输主要是通过JSON数据结构来传递的，可以自己在Action中生成JSON对象，然后前台再用 Ext.util.JSON.decode()的方法来解码，但是更加简单的一个方法是使用jsonplugin，可以从本文下方获得该插件 ，然后加在项目的lib里。
首先，我们建立一个DO，例如Usr.java：
public class Usr { private java.lang.String userId; private java.lang.String fullName; private java.lang.String email; //getters and setters}然后我们可以在Action里面通过Spring和Hibernate来获取List<Usr>，当然也可以由其他方式取得，和前台是无关的，因此这里省略，只是简单地赋值。 public class TestJson extends ActionSupport{ private List<Usr> usrs; private boolean success=true; //在EXT JS中的store对象需要用到的判断属性 public boolean isSuccess() { return success; } public void setUsrs(List<Usr> usrs) { this.usrs= usrs; } public List<Usr> getUsrs() { return usrs; } @Override public String execute() throws Exception { Usr a = new Usr (); a.setUsrId("id1"); a.setFullName("mg"); a.setEmail("scutmg@gmail.com"); ids.add(a); return "success"; }}以下是配置文件struts.xml：<struts> <!-- Configuration for the default package. --> <package name="default" extends="json-default"> <action name="testJson" method="execute" name="code"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> <link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" /> <script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script> function showUrl(value){ return "<a href='mailto:"+value+"'>value</a>"; } Ext.onReady(function(){ var ds = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({url:'testJson.action'}),//调用的动作 reader: new Ext.data.JsonReader({ root: 'usrs', //从struts2里面传递过来的参数 successProperty :'success' }, [ //JSON数据的映射 {name: 'usrId',mapping:'usrId',type:'string'}, {name: 'fullName',mapping:'fullName',type:'string'}, {name: 'email',mapping:'email',type:'string'}, ]) }); var grid = new Ext.grid.GridPanel({ id:"grid", el:"example-grid", ds : ds, store: ds, columns: [ {header: "id", width: 120, dataIndex: 'usrId', sortable: true}, {header: "usrName", width: 120, dataIndex: 'fullName', sortable: true}, {header: "email", width: 120, dataIndex: 'email', renderer:showUrl} //显示超链接 ], width:360, height:600 }); grid.render(); ds.load(); }); </script> </head> <body> <table align="center" width="80%"> <tr><td align="center"><div id="example-grid"></div></td></tr> </table> </body></html>这样，数据就可以很方便地从Struts2的action里面传递到ExtJS的GridPanel数据表格中了。jsonplugin下载:
jsonplugin-0.32.jar Struts 2 JSON Plugin 0.32 - Struts 2.0.x Compatible
[attach]72[/attach]
jsonplugin-0.34.jar Struts 2 JSON Plugin 0.34 - Struts 2.1.x Compatible
[attach]71[/attach]