Struts2Spring3MyBatis3整合ExtJS完成ColumnTree 二.docx

Struts2Spring3MyBatis3整合ExtJS完成ColumnTree 二.docx

《Struts2Spring3MyBatis3整合ExtJS完成ColumnTree 二.docx》由会员分享，可在线阅读，更多相关《Struts2Spring3MyBatis3整合ExtJS完成ColumnTree 二.docx（19页珍藏版）》请在冰豆网上搜索。

Struts2Spring3MyBatis3整合ExtJS完成ColumnTree二

三、加入Struts2框架

1、准备工作

添加jar文件如下：

org.springframework.web-3.0.5.RELEASE.jar

org.springframework.aop-3.0.5.RELEASE.jar

这2个jar包是spring的context所依赖的jar包

struts2-spring-plugin-2.2.3.jar是struts整合spring的jar包

2、在web.xml加入struts2的控制器

struts2

org.apache.struts2.dispatcher.FilterDispatcher

struts2

/*

3、在src目录添加struts.xml

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

"http:

//struts.apache.org/dtds/struts-2.0.dtd">

启动后，可以看到首页index的页面就基本整合完成。

4、首先看看Action代码，代码如下：

packagecom.hoo.action;

importjava.util.ArrayList;

importjava.util.List;

importjavax.inject.Inject;

importjavax.inject.Named;

importorg.springframework.stereotype.Component;

importcom.hoo.biz.AccountBiz;

importcom.hoo.entity.Account;

importcom.opensymphony.xwork2.ActionSupport;

/**

*function:

AccountAction

*@authorhoojo

*@createDate2011-5-11下午12:

03:

05

*@fileAccountAction.java

*@packagecom.hoo.action

*@projectS2SMyBatis

*@blog

*@emailhoojo_@

*@version1.0

*/

@Component

publicclassAccountActionextendsActionSupport{

/**

*@authorHoojo

*/

privatestaticfinallongserialVersionUID=-973535478139284399L;

@Inject

@Named（"accountBiz"）

privateAccountBizbiz;

privateAccountacc;

privateListresults=newArrayList（）;

publicListgetResults（）{

returnresults;

}

publicAccountgetAcc（）{

returnacc;

}

publicvoidsetAcc（Accountacc）{

this.acc=acc;

}

publicStringadd（）throwsException{

if（!

biz.addAccount（acc））{

this.addActionMessage（"添加数据失败"）;

returnERROR;

}

returnSUCCESS;

}

publicStringshow（）throwsException{

results=biz.getList（）;

return"show";

}

publicStringremove（）throwsException{

returnSUCCESS;

}

publicStringedit（）throwsException{

returnSUCCESS;

}

publicStringtreeData（）throwsException{

results=biz.getList（）;

return"tree";

}

}

这个Action被注解成Component，那么在spring的applicationContext配置文件中就不需要进行标签的配置了。

上面注入了AccountDao，完成相关操作。

5、由于Struts2要和Spring进行整合，所以struts的配置会有点不同

account!

show.action

/show.jsp

上面的class不再是AccountAction的classpath，而是spring容器中配置的bean。

就是通过@Component注解过的AccountAction，被注解注释过后它的id默认是类名称首字母小写。

所以上面的action的配置是accountAction。

6、由于要整合ExtJS，所以这里用到struts2-json-plugin-2.2.3.jar这个插件，将其加入到lib库中，struts.xml更改成：

xmlversion="1.0"encoding="UTF-8"?

>

DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.0//EN"

"http:

//struts.apache.org/dtds/struts-2.0.dtd">

/error.jsp

account!

show.action

/show.jsp

acc

AccountAction中的treeData方法返回的tree，在account这个action配置中找到tree的result，将result的type配置成json。

表示该result的数据以json的方式展示。

tree这个result还配置了一个param，名称为excludeProperties表示排除的属性。

这个参数将排除当前Action中的acc属性。

也就是说这个属性将不会得到json的转换。

其他属性将会被转换成json。

7、前台页面

index.jsp

show.action">显示所有

添加数据

treeData.action">JSON

show.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@taglibprefix="s"uri="/struts-tags"%>

<%

Stringpath=request.getContextPath（）;

StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";

%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

">

iteratorvalue="results"status="s"var="data">

${data}<===>

propertyvalue="#data.accountId"/>#

propertyvalue="#data.username"/>#

propertyvalue="#data.password"/>#

propertyvalue="#data.createTime"/>#

datename="#data.createTime"format="yyyy-MM-dd"/>#

remove.action">删除|

edit.action">修改

iterator>

Struts标签和OGNL表达式显示数据

add.jsp

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<%@taglibprefix="s"uri="/struts-tags"%>

<%

Stringpath=request.getContextPath（）;

StringbasePath=request.getScheme（）+":

//"+request.getServerName（）+":

"+request.getServerPort（）+path+"/";

%>

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

">

formaction="account!

add.action"method="post">

textfieldname="acc.username"/>

passwordname="acc.password"/>

submitvalue="提交">

submit>

form>

四、整合ExtJS

1、添加ext的库，版本是2.2.2

需要添加column-tree.css

/*

*ExtJSLibrary2.2.1

*Copyright（c）2006-2009,ExtJS,LLC.

*licensing@

*

*

*/

.x-column-tree.x-tree-node{

zoom:

1;

}

.x-column-tree.x-tree-node-el{

/*border-bottom:

1pxsolid#eee;borders?

*/

zoom:

1;

}

.x-column-tree.x-tree-selected{

background:

#d9e8fb;

}

.x-column-tree.x-tree-nodea{

line-height:

18px;

vertical-align:

middle;

}

.x-column-tree.x-tree-nodeaspan{

}

.x-column-tree.x-tree-node.x-tree-selectedaspan{

background:

transparent;

color:

#000;

}

.x-tree-col{

float:

left;

overflow:

hidden;

padding:

01px;

zoom:

1;

}

.x-tree-col-text,.x-tree-hd-text{

overflow:

hidden;

-o-text-overflow:

ellipsis;

text-overflow:

ellipsis;

padding:

3px3px3px5px;

white-space:

nowrap;

font:

normal11pxarial,tahoma,helvetica,sans-serif;

}

.x-tree-headers{

background:

#f9f9f9url（../ext2/resources/images/default/grid/grid3-hrow.gif）repeat-x0bottom;

cursor:

default;

zoom:

1;

}

.x-tree-hd{

float:

left;

overflow:

hidden;

border-left:

1pxsolid#eee;

border-right:

1pxsolid#d0d0d0;

}

.task{

background-image:

url（../shared/icons/fam/cog.png）!

important;

}

.task-folder{

background-image:

url（../shared/icons/fam/folder_go.png）!

important;

}

Ext.tree.ColumnTree.js

/*

*ExtJSLibrary2.2.1

*Copyright（c）2006-2009,ExtJS,LLC.

*licensing@

*

*

*/

Ext.tree.ColumnTree=Ext.extend（Ext.tree.TreePanel,{

lines:

false,

borderWidth:

Ext.isBorderBox?

0:

2,//thecombinedleft/rightborderforeachcell

cls:

'x-column-tree',

onRender:

function（）{

Ext.tree.ColumnTree.superclass.onRender.apply（this,arguments）;

this.headers=this.body.createChild（

{cls:

'x-tree-headers'},this.innerCt.dom）;

varcols=this.columns,c;

vartotalWidth=0;

for（vari=0,len=cols.length;i

c=cols[i];

totalWidth+=c.width;

this.headers.createChild（{

cls:

'x-tree-hd'+（c.cls?

c.cls+'-hd':

''）,

cn:

{

cls:

'x-tree-hd-text',

html:

c.header

},

style:

'width:

'+（c.width-this.borderWidth）+'px;'

}）;

}

this.headers.createChild（{cls:

'x-clear'}）;

//preventfloatsfromwrappingwhenclipped

this.headers.setWidth（totalWidth）;

this.innerCt.setWidth（totalWidth）;

}

}）;

Ext.tree.ColumnNodeUI=Ext.extend（Ext.tree.TreeNodeUI,{

focus:

Ext.emptyFn,//preventoddscrollingbehavior

renderElements:

function（n,a,targetNode,bulkRender）{

this.indentMarkup=n.parentNode?

n.parentNode.ui.getChildIndent（）:

'';

vart=n.getOwnerTree（）;

varcols=t.columns;

varbw=t.borderWidth;

varc=cols[0];

varbuf=[

'

tree-node-id="',n.id,'"class="x-tree-node-elx-tree-node-leaf',a.cls,'">',

'

',c.width-bw,'px;">',

'',this.indentMarkup,"",

'',

'

"x-tree-node-inline-icon":

""）,（a.iconCls?

""+a.iconCls:

""）,'"unselectable="on">',

'

a.href:

"#",'"tabIndex="1"',

a.hrefTarget?

'target="'+a.hrefTarget+'"':

"",'>',

'',n.text||（c.renderer?

c.renderer（a[c.dataIndex],n,a）:

a[c.dataIndex]）,"",

"