日期:2014-05-16  浏览次数:20367 次

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中去使用了