Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】疯狂代码！

三、加入Struts2框架

1、准备工作添加jar文件如下： clip_image002Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

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
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

启动后，可以看到首页index的页面就基本整合完成。 4、首先看看Action代码，代码如下： package com.hoo.action;
import java.util.ArrayList;
import java.util.List;
import javax.inject.Inject;
import javax.inject.Named;
import org.springframework.stereotype.Component;
import com.hoo.biz.AccountBiz;
import com.hoo.entity.Account;
import com.opensymphony.xwork2.ActionSupport;
/**
* function: Account Action
* @author hoojo
* @createDate 2011-5-11 下午12:03:05
* @file AccountAction.java
* @package com.hoo.action
* @project S2SMyBatis
* @blog http://blog.csdn.net/IBM_hoojo
* @email [email protected]
* @version 1.0
*/
@Component
public class AccountAction extends ActionSupport {
/**
* @author Hoojo
*/
private static final long serialVersionUID = -973535478139284399L;
@Inject
@Named("accountBiz")
private AccountBiz biz;
private Account acc;
private List results = new ArrayList();
public List getResults() {
return results;
}
public Account getAcc() {
return acc;
}
public void setAcc(Account acc) {
this.acc = acc;
}
public String add() throws Exception {
if (!biz.addAccount(acc)) {
this.addActionMessage("添加数据失败");
return ERROR;
}
return SUCCESS;
}
public String show() throws Exception {
results = biz.getList();
return "show";
}
public String remove() throws Exception {
return SUCCESS;
}
public String edit() throws Exception {
return SUCCESS;
}
public String treeData() throws Exception {
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更改成：
"-//Apache Software Foundation//DTD Struts Configuration 2.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
显示所有
添加数据
JSON

show.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

show all data

${data }<===>
#
#
#
#
#
"account!remove.action">删除 | "account!edit.action">修改

Struts标签和OGNL表达式显示数据 add.jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

add

四、整合ExtJS

1、添加ext的库，版本是2.2.2 需要添加column-tree.css /*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
.x-column-tree .x-tree-node {
zoom:1;
}
.x-column-tree .x-tree-node-el {
/*border-bottom:1px solid #eee; borders? */
zoom:1;
}
.x-column-tree .x-tree-selected {
background: #d9e8fb;
}
.x-column-tree .x-tree-node a {
line-height:18px;
vertical-align:middle;
}
.x-column-tree .x-tree-node a span{
}
.x-column-tree .x-tree-node .x-tree-selected a span{
background:transparent;
color:#000;
}
.x-tree-col {
float:left;
overflow:hidden;
padding:0 1px;
zoom:1;
}
.x-tree-col-text, .x-tree-hd-text {
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
padding:3px 3px 3px 5px;
white-space: nowrap;
font:normal 11px arial, tahoma, helvetica, sans-serif;
}
.x-tree-headers {
background: #f9f9f9 url(../ext2/resources/images/default/grid/grid3-hrow.gif) repeat-x 0 bottom;
cursor:default;
zoom:1;
}
.x-tree-hd {
float:left;
overflow:hidden;
border-left:1px solid #eee;
border-right:1px solid #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 /*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
Ext.tree.ColumnTree = Ext.extend(Ext.tree.TreePanel, {
lines:false,
borderWidth: Ext.isBorderBox ? 0 : 2, // the combined left/right border for each cell
cls:'x-column-tree',
_disibledevent=>function(){
Ext.tree.ColumnTree.superclass.onRender.apply(this, arguments);
this.headers = this.body.createChild(
{cls:'x-tree-headers'},this.innerCt.dom);
var cols = this.columns, c;
var totalWidth = 0;
for(var i = 0, len = cols.length; i < len; 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'});
// prevent floats from wrapping when clipped
this.headers.setWidth(totalWidth);
this.innerCt.setWidth(totalWidth);
}
});
Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
focus: Ext.emptyFn, // prevent odd scrolling behavior
renderElements : function(n, a, targetNode, bulkRender){
this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
var t = n.getOwnerTree();
var cols = t.columns;
var bw = t.borderWidth;
var c = cols[0];
var buf = [
'

,n.id,'" class="x-tree-node-el x-tree-node-leaf ', a.cls,'">',
',c.width-bw,'px;">',
'',this.indentMarkup,"",
'

',
'

',
',a.href ? a.href : "#",'" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '>',
'', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
"
"];
for(var i = 1, len = cols.length; i < len; i++){
c = cols[i];
buf.push(',(c.cls?c.cls:''),'" style="width:',c.width-bw,'px;">',
'',(c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"
",
"
");
}
buf.push(
'
',
'',
"

");
if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){
this.wrap = Ext.DomHelper.insertHtml("beforeBegin",
n.nextSibling.ui.getEl(), buf.join(""));
}else{
this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf.join(""));
}
this.elNode = this.wrap.childNodes[0];
this.ctNode = this.wrap.childNodes[1];
var cs = this.elNode.firstChild.childNodes;
this.indentNode = cs[0];
this.ecNode = cs[1];
this.iconNode = cs[2];
this.anchor = cs[3];
this.textNode = cs[3].firstChild;
}
});
2、编写静态ColumnTree /**
* @function column tree column tree 多列信息的tree
* @auhor: hoojo
* @createDate: Aug 29, 2010 10:39:02 PM
* @blog: blog.csdn.net/IBM_hoojo
* @email: [email protected]
*/
Ext.ns("Ext.hoo.tree");
Ext.hoo.tree.UserColumnTree = Ext.extend(Ext.tree.ColumnTree, {
constructor: function () {
Ext.hoo.tree.UserColumnTree.superclass.constructor.call(this, {
renderTo: "show",
title: "用户信息column tree",
width: 450,
hieght: 400,
autoScroll: true,
rootVisible: true,
columns: [{
header: "名称",
width: 100,
dataIndex: "name"
}, {
header: "性别",
width: 100,
dataIndex: "sex"
}, {
header: "年龄",
width: 100,
dataIndex: "age"
}, {
header: "班级",
width: 100,
dataIndex: "classes"
}],
loader: new Ext.tree.TreeLoader({
baseAttrs: {
uiProvider: Ext.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: "用户基本信息",
children: [{
name: "大二一班",
classes: "二（1）班",
children: [{
name: "微微",
sex: "女",
age: 20,
classes: "二（1）班",
leaf: true
},{
name: "筱筱",
sex: "女",
age: 22,
classes: "二（1）班",
leaf: true
},{
name: "珠珠",
sex: "女",
age: 19,
classes: "二（1）班",
leaf: true
},{
name: "拉拉",
sex: "女",
age: 19,
classes: "二（1）班",
leaf: true
}]
},{
name: "二二班",
classes: "二（2）班",
children: [{
name: "放放",
sex: "男",
age: 22,
classes: "二（2）班",
leaf: true
},{
name: "枫枫",
sex: "男",
age: 22,
classes: "二（2）班",
leaf: true
}]
},{
name: "未成立",
sex: "",
age: 0,
classes: "二（3）班",
leaf: true
}]
})
});
this.on("click", this.onNodeClick, this);
},
_disibledevent=>function (node, e) {
alert(Ext.encode(node.attributes) + "###" + node.leaf + "###" + Ext.encode(e.getPoint()) + "##" + e.getXY());
}
});
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";
new Ext.hoo.tree.UserColumnTree();
});
上面的就是一个静态的ColumnTree，在Ext的onReady函数中运行它。 3、、需要在页面中导入ext库、css、即我们编写的js

TreePanel 示例

"show" style="margin-left: 200px;">
"showBasic" style="margin-left: 200px; margin-top: 50px;">

在浏览器中请求http://localhost:8080/S2SMyBatis/columnTree.htm 结果如下 clip_image004clip_image002Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

clip_image004clip_image002Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

4、下面编写远程数据的ColumnTree，代码如下： Ext.ns("Ext.hoo.tree");
Ext.hoo.tree.UserBasicColumnTree = Ext.extend(Ext.tree.ColumnTree, {
constructor: function () {
Ext.hoo.tree.UserBasicColumnTree.superclass.constructor.call(this, {
renderTo: "showBasic",
title: "远程数据",
width: 550,
hieght: 400,
autoScroll: true,
rootVisible: true,
columns: [{
header: "编号",
width: 100,
dataIndex: "accountId"
}, {
header: "用户名称",
width: 100,
dataIndex: "username"
}, {
header: "密码",
width: 100,
dataIndex: "password"
}, {
header: "创建时间",
width: 150,
dataIndex: "createTime"
}],
loader: new Ext.tree.TreeLoader({
baseAttrs: {
uiProvider: Ext.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: "用户基本信息",
children: []
}),
listeners: {
expandnode: {
fn: this.onExpandNode,
scope: this
}
}
});
},
_disibledevent=>function (node) {
//只对未加载过的添加子结点，加载后不在重复加载；避免增加请求，浪费资源
if (!node.attributes.isLoad) {
Ext.Ajax.request({
url: Ext.hoo.tree.UserBasicColumnTree.TREE_DATA_URL,
success: function (response, options) {
node.attributes.isLoad = true;//设置加载标识
var nodes = Ext.decode(response.responseText); //将json的text转换成js对象
node.appendChild(nodes.results);
},
failure: function (response) {
Ext.Msg.alert("程序异常", response.responseText);
}
});
}
}
});
Ext.hoo.tree.UserBasicColumnTree.TREE_DATA_URL = "account!treeData.action";
由于服务器端返回来的数据是一个对象，而不是一个Array。所以客户端要将数据稍作处理，然后再添加到columnTree的children中。 5、在上面的onReady中创建这个对象就可以了运行 Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";
new Ext.hoo.tree.UserColumnTree();
new Ext.hoo.tree.UserBasicColumnTree();
});
同样在浏览器中请求http://localhost:8080/S2SMyBatis/columnTree.htm 可以看到 clip_image006clip_image004clip_image002Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

clip_image006clip_image004clip_image002Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

由于Account对象的数据形式不是一个完整的tree形态。所以展示效果就是上面的样子。正确的数据的格式的话，Account中至少包含以下属性： Boolean leaf; List children; 这样就知道当前节点是否是叶子节点，并且知道其子元素。

Tags:

Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】

三、加入Struts2框架

四、整合ExtJS

延伸阅读

最新评论

发表评论

赞助商广告

随机更新

热门标注

最近更新

最新标注