extjs+struts2的一个套路模式

其实,在struts2+extjs的结合中,可以总结出一些精华的套路模式,比如struts2中
返回的数据如何在前端的extjs展示出来,可以用如下的方式套路去整理:
比如一个struts2的action,返回的是相册中相片的列表,比如
<action name="getPhotos"
class="GetPhotosAction">
<result name="success">/WEB-INF/photos.jsp
</result>
</action>
那么在photos.jsp中,可以这样处理:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
[
<s:iterator id="photo" value="photos" status="status">
{id:'<s:property value="#photo.id" />',name:'<s:property value="#photo.filename" />',filename:'<s:property
value="#photo.filename" />',userId:'<s:property value="#photo.userId" />', albumId:'<s:property value="#photo.albumId" />'}
<s:if test="#status.last==false">
,
</s:if>
</s:iterator>
]
就是STRUTS2+EXTJS嵌套使用了.它实际上会生成:
[{id:...,name: ,},{id:333,...name:xxxx}]这样的JSON格式数据
而在EXT JS组件中,可以这样用:
function getImageDataView()
{

imageDataView =new Ext.DataView(
{
itemSelector :'div.thumb-wrap',
style :'overflow:auto',
multiSelect :true,
id :'imageDataView',
store :getPhotosJsonStore(),
tpl :new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="getPhoto.action?filename={filename}&albumId={albumId}" class="thumb-img"/></div>',
'<span></span></div>', '</tpl>')
});

store :getPhotosJsonStore(),
是这个东西:
function getPhotosJsonStore()
{

return new Ext.data.JsonStore( {
url :'getPhotos.action?albumId=' + albumId,
autoLoad :true,
id :'name',
fields : [ 'id', 'name', 'filename', 'albumId' ]
})
}

可以看到服务端返回的JSON格式,在ext中用{filename}这样就可以嵌套到EXTJS中去使用了
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值