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

2012-11-23

[终于原创一文了]S2SH与EXT JS 3.1整合习作??????? 之前在extjs官网上看到那强大的功能和绚丽的界面,也忍

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

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

[总算原创一文了]S2SH与EXT JS 3.1整合习作 ??????? <action name="ViewMessageAction" />
??????? </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 = [
??? '标        题 :  {MTitle} ',
??? '时        间 :  {MTime} ',
??? '留言内容 : {MMessage} ',
??? '回复内容 : {MRemessage} '
??? ];
??? var bookTpl = new Ext.Template(bookTplMarkup);

??????? 尾声:

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

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

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

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

热点排行

JavaScript

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