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

kidiaoer

浏览: 821815 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

经验总结

EXT 数据结构 json Struts 360

本帖介绍如何通过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下载:
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]

分享到：

在Struts2.0中使用JSON结合DWR和EXT | 搭建EXTJS和STRUTS2框架(ext和struts2简 ...

2010-08-23 08:20
浏览 1846
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论