Struts2与Ext JS数据表格GridPanel之间的数据传递

bright_future

浏览: 88956 次
性别:
来自: 北京

最近访客更多访客>>

nihao005588

Vuezkm

声色_

sp42

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT 数据结构 json Struts CSS

本帖介绍如何通过struts 2获取数据，把数据填充到Ext JS的数据表格组件GridPanel中，部分内容是参考网上的一些教程的。首先，Struts 2和EXT JS之间的数据传输主要是通过JSON数据结构来传递的，可以自己在Action中生成JSON对象，然后前台再用Ext.util.JSON.decode()的方法来解码，但是更加简单的一个方法是使用jsonplugin，可以从http://code.google.com/p/jsonplugin/获得该插件，然后加在项目的lib里。

首先，我们建立一个DO，例如

CODE:

public class User {
     private java.lang.String userId;
     private java.lang.String fullName;
     private java.lang.String email; //getters and setters
}
然后我们可以在Action里面通过Spring和Hibernate来获取List<User>，当然也可以由其他方式取得，和前台是无关的，因此这里省略，只是简单地赋值。

CODE:public class TestJson extends ActionSupport{

private List<User> users;
private boolean success=true; //在EXT JS中的store对象需要用到的判断属性

public boolean isSuccess() {
   return success;
}
public void setUsers(List<User> users) {
   this.users= users;
}
public List<User> getUsers() {
   return users;
}
@Override
public String execute() throws Exception {
   User a = new User ();
   a.setUserId("id1");
   a.setFullName("mg");
   a.setEmail(" scutmg@gmail.com ");
   ids.add(a);
    return "success";
}
}

---------------------------------------------

以下是配置文件struts.xml：

CODE:<struts>


<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页面：
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+ 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>

分享到：

ext combobox 数据提交问题 | Jstl EL 表达式遍历Map

2009-04-29 14:59
浏览 3228
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论