[终于原创一文了]S2SH与EXT JS 3.1整合习作

        之前在extjs官网上看到那强大的功能和绚丽的界面,也忍不住开始学了,刚刚开始学真的不大好受,用尽吃奶的力终于把extjs的两个demo组合起来作为一个留言板:

        分别为http://www.extjs.com/deploy/dev/examples/grid/progress-bar-pager.html这个demo的进度条,

http://www.extjs.com/deploy/dev/examples/grid/binding-with-classes.html这个demo的显示框结合,

看着就舒服...哈哈....转入正题:

        熟悉S2SH的都知道,作为显示层的Struts是负责与页面进行交互,当S2SH整合好之后再整合extjs进去,也必然是Struts与extjs之间的事情,所以这里spring与hibernate就不啰嗦了

        这里使用json来作为Struts与extjs之间的中介,与XML类似的,json是一种轻量级的数据交换格式,易于人阅读和编写,比XML的代码量更少,看起来更直观,所以这里就采用json

XML:

<article>

      <title>文章标题1</title>

      <text>文章正文1</text>

</article>

<article>

      <title>文章标题2</title>

      <text>文章正文2</text>

</article>

相当于json的:

{"article":["title":"文章标题1","text":"文章正文1"],"article":["title":"文章标题2","text":"文章正文2"}

        上面的例子把等价的XML与json列出来作为对比,语法结构也很简单.

 

Struts2部分:

        和以往S2SH一样,整合的方式都是一样(需要添加json-lib.jar与struts2-json-plugin.jar),唯一不同就在action返回的内容不一样,struts.xml的片段:

    <package name="json" extends="json-default" namespace="/json">
        <action name="ViewMessageAction" class="viewMessageAction">
            <result type="json" />
        </action>
    </package>

        这里是需要继承json-default,而平常使用都是继承struts-default的,还有result 的类型为json,这里并不需要返回页面,经过action处理之后Struts就返回json的字符串给extjs,至于怎么转呢?Struts2的json插件会帮我们自动转,如ViewMessageAction类中有:

private List<Messagebox> messagelist;

//省略getter&setter方法

        Messagebox里面的是留言ID,留言标题,留言正文等属性和相应的getter&setter方法,当执行WEBROOT/json/ViewMessageAction.action时,发现json插件已经把数据都转换好:

{"messagelist":[{"MAuditsign":1,"MId":23,"MIp":"0:0:0:0:0:0:0:1","MMessage":"aaaa"."MRemessage":"aaaa","MTime":"2010-01-14 19:31:53","MTitle":"aaa"}]

        这样就已经完成Struts2部分的工作了.

Extjs部分:

       数据源部分:

        参照上文的两个demo的源码,我们要修改的是数据读取部分,extjs提供的example是用内置的数据,而我们需要使用来自Struts2的json作为数据源:

var store = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
    method: 'GET',
            url: 'http://localhost:8084/json/ViewMessageAction.action'
        }),
   root: 'messagelist',
   totalProperty : 'totalProperty',
   fields: ['MId', 'MMessage','MRemessage','MTime','MTitle']
});

        需要说明下的是totalProperty 这个属性,这个属性是分页时使用的,意思是数据行的总数,所以还需要在ViewMessageAction.java中添加

private long totalProperty;

//省略getter&setter方法

        execute()中需要把数据的总行数放入long totalProperty中.

        留言列表组件部分:

        添加好数据源之后就需要修改Ext.grid.GridPanel组件,这个组件就是上图留言板列表的地方,能看懂英文的应该都能改好了,这里就不一一说明.

        留言详情组件部分:

        然后添加Ext.Panel组件,这个组件就是上图列表下面的地方,用于显示留言正文与回复:

var ct = new Ext.Panel({
        frame: true,title: '留言详情',width: 1000,height: 200,layout: 'border',
        items: [grid,
        {id: 'detailPanel',region: 'center',bodyStyle: {
         background: '#ffffff',padding: '7px'},
        html: '请点击上面留言列表以查看留言内容以及回复'}]
})

        点击事件触发器部分:

        然后还要添加一个事件触发器,当点击Ext.grid.GridPanel组件的行的时候就把详情显示在Ext.Panel中:

    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
        var detailPanel = Ext.getCmp('detailPanel');
        bookTpl.overwrite(detailPanel.body, r.data);
    });

        还有显示的格式:

    var bookTplMarkup = [
    '<b>标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题&nbsp;:&nbsp;</b> {MTitle}<br/>',
    '<b>时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间&nbsp;:&nbsp; {MTime}</b><br/>',
    '<b>留言内容&nbsp;:&nbsp;</b>{MMessage}<br/>',
    '<b>回复内容&nbsp;:&nbsp;</b>{MRemessage}<br/>'
    ];
    var bookTpl = new Ext.Template(bookTplMarkup);

        尾声:

        最后读取数据源,以及把上面设计好的组件放入html里面相对应ID的DIV中即可完成:

store.load({params:{start:0, limit:10}});

grid.render('list');
ct.render('info');

        这样就完成了整合了.小弟第一次发文章,文笔和思路可能不大好,请多多原谅~