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