Struts2与Ext JS数据报表GridPanel之间的数据传递
日期：2014-05-16 浏览次数：20338 次
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：
以下是html页面：
jsonplugin
本帖介绍如何通过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" class="TestJson">
<result type="json"/>
</action>
</package>
</struts>需要注意的是package里面的属性extends必须使用json-default来获得json的支持，另外action的result type也要是json。以下是html页面：
<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
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
