ExtJS 4.x 第三搞 Tree + Struts2.x
没有过多的解释，只解释我觉得重要的部分：
1.后台是struts 2.3，实现零配置文件，直接使用struts2 annotation实现配置，所以看不到action的xml配置文件；
2.ExtJS 4.07
3.ext-core-top.jsp
为导入的头文件，包含样式表和基本包，简化jsp代码，不必每个都导入，传一个basePath作为相对路径；4.struts返回的json参数名称为：treeResult
如图：
这点我琢磨了一会，在ExtJS 3.X中，这种参数名是需要自己重新解析的，我在想，4.x在这方面是否有改进呢，还真让我琢磨出来了，使用reader的root配置，即可解析treeResult参数,详细js看3.JS文件
reader:{
type:'json',
root:'treeResult'
}
5.struts2的基本配置：
<struts>
<!-- Some or all of these can be flipped to true for debugging -->
<constant name="struts.i18n.reload" value="false" />
<!-- 配置struts2应用于开发模式 -->
<constant name="struts.devMode" value="true" />
<!-- 配置Convention插件自动重加载映射-->
<constant name="struts.convention.classes.reload" value="true"/>
<!-- Convention插件自动重加载映射 -->
<constant name="struts.configuration.xml.reload" value="false" />
<constant name="struts.custom.i18n.resources" value="globalMessages" />
<!-- 请求的后缀 -->
<constant name="struts.action.extension" value="action,act," />
<!-- 设置Convention插件定位视图资源的根路径。默认值为/WEB-INF/content -->
<constant name="struts.convention.result.path" value="/" />
<!-- action后缀应该为Controller,如LoginController.java -->
<constant name="struts.convention.action.suffix" value="Controller"/>
<constant name="struts.convention.action.mapAllMatches" value="true"/>
<!-- 指定不扫描哪些包 -->
<constant name="struts.Convention.exclude.packges" value="com.gwtjs.struts.action"/>
<!-- 指定的包作为搜寻Action的根包 -->
<constant name="struts.convention.package.locators" value="example"/>
<!--
struts.convention.action.packages:Convention插件以该常量指定包作为根包来搜索Action类
-->
<constant name="struts.convention.action.packages" value="example"/>
</struts>
也可以用属性文件配置，这里不说了。
代码如下：
1.JSP
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>tree 1 </title>
<jsp:include page="../include/ext-core-top.jsp" flush="true">
<jsp:param value="../" name="basePath" />
</jsp:include>
<script type="text/javascript" src="tree1.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2.导入的头文件
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="${param.basePath}ext-4.x/resources/css/ext-all.css" />
<script type="text/javascript" src="${param.basePath}ext-4.x/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="${param.basePath}style/main.css" />
<link rel="stylesheet" type="text/css" href="${param.basePath}style/icon-all.css" />
<script type="text/javascript">
Ext.QuickTips.init();
</script>
3.JS文件
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
Ext.require(['Ext.tree.*','Ext.data.*','Ext.tip.*']);
Ext.onReady(function(){
var tree = Ext.create('Ext.tree.Panel',{
store:Ext.create('Ext.data.TreeStore',{
proxy:{
type:'ajax',
url:'getNodes.action',
reader:{
type:'json',
root:'treeResult'
}
},
root:{
text:'Ext JS Tree Test 1',
id:0,
expanded:true
},
folderSort:true,
sorters:[{
proerty:'text',
direction:'ASC'
}]
}),
viewConfig:{
plugins:{
ptype:'treeviewdragdrop'
}
},
renderTo:Ext.getBody(),
height:380,
width:250,
title:'Files Tree',
useArrows:true,
dockedItems:[{
xtype:'toolbar',
items:[{
text:'Expand All',
handler:function(){
tree.expandAll();
}
},{
text:'Collapse All',
handler:function(){
tree.collapseAll();
}
}]
}]
});
console.debug("debug","success...");
});
4.Struts
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.gwtjs.example;
import java.util.ArrayList;
import java.util.List;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import com.gwtjs.model.Module;
import com.opensymphony.xwork2.ActionSupport;
/**
*
* @author aGuang
*/
@ParentPackage("json-default")
public class TreeAction extends ActionSupport /*implements ModelDriven<Module>*/ {
/**
*
*/
private static final long serialVersionUID = 1L;
private String node;
private String sort;
private Module model = new Module();
private List<Module> treeResult = new ArrayList<Module>();
@Override
@Action(value = "getNodes", results = { @Result(name = "success", type = "json") })
public String execute() throws Exception {
generatorTree();
return SUCCESS;
}
private void generatorTree() {
// Random dom = new Random();
for (int i = 1; i < 9; ++i) {
Module m = new Module();
m.setId(i);
m.setLeaf(true);
m.setText("sort " + i);
treeResult.add(m);
}
}
public String getNode() {
return node;
}
public void setNode(String node) {
this.node = node;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public List<Module> getTreeResult() {
return treeResult;
}
public void setTreeResult(List<Module> treeResult) {
this.treeResult = treeResult;
}
public Module getModel() {
return model;
}
public void setModel(Module model) {
this.model = model;
}
}
5.Module.java
public class Module { private Integer id; private String text; private Integer parentId; private boolean leaf; //get set 略 }
测试结果图：
最后，包如下：
其它包跟以往一样，重点两个包
struts2-convention-plugin-2.3.1.jar
Struts2实现零配置需要的插件；
struts2-config-browser-plugin-2.3.1.jar
有了这个jar包给调试带来一定的方便，输入http://127.0.0.1:8686/config-browser/actionNames.action,可以看到项目中的struts所有的配置；
如图：
我的tree请的路径是getNodes.action,在此预览视图中可以看到如下配置信息：
Action information
Action information - getNodes
| Action name: | getNodes |
| Namespace: | |
| Action class: | com.gwtjs.example.TreeAction |
| Action method: | execute |
| Parameters: | |
| Default location: | /getNodes.action |
| Results | Exception Mappings | Interceptors | Properties | Validators |
|---|
| Name | Type | Parameters |
|---|---|---|
| success | org.apache.struts2.json.JSONResult |
跟DWR的后台预览有点类似，呵呵。。。
如果要源码或有问题,可以上群29521319