将JSON Plugin返回值作为TreeLoader内容
JSON Plugin插件返回值为 {nodes:[{"id":1,"leaf":false,"qtip":"a","text":"a"}]}格式，而TreeLoader要求是一数组格式，如何将该对象转化为数据，可通过重写Ext.tree.TreeLoader的processResponse方法实现，关键代码：
TonyTreeLoader = function(config) {
TonyTreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(TonyTreeLoader, Ext.tree.TreeLoader, {
processResponse : function(response, node, callback){
var json = response.responseText;
/*added to remove result wrapper from JSON*/
if(json.indexOf('{"nodes":') == 0) json = json.substring(9, json.length-1);
alert(json);
try {
var o = eval("("+json+")");
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
}
});
下面给出一份完整示意代码：
1. HTML
该HTML中TreeLoader数据源自一Action返回内容
temp.html
------------------------------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="stylesheet/ext-patch.css" />
<script type="text/javascript" src="plugins/extjs/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="plugins/extjs/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="javascript/common.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
TonyTreeLoader = function(config) {
TonyTreeLoader.superclass.constructor.call(this, config);
}
Ext.extend(TonyTreeLoader, Ext.tree.TreeLoader, {
processResponse : function(response, node, callback){
var json = response.responseText;
/*added to remove result wrapper from JSON*/
if(json.indexOf('{"nodes":') == 0) json = json.substring(9, json.length-1);
try {
var o = eval("("+json+")");
node.beginUpdate();
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this, node);
}
}catch(e){
this.handleFailure(response);
}
}
});
Ext.onReady(function(){
var tp=new Ext.tree.TreePanel({
renderTo:"hello",
root:new Ext.tree.AsyncTreeNode({
id:"root",
text:"日志分类",
expanded:true
}),
loader:new TonyTreeLoader({
url:"topicCategory.action",
listeners:{
"beforeload":function(treeLoader,node) {
treeLoader.baseParams.id=(node.id!="root"?node.id:"");
}
}
})
})
});
</script>
</head>
<body>
<div id="hello"></div>
</body>
</html>
2. Action
import bean.Node;
import java.util.*;
public class TopicCategoryAction {
static Node v1 = new Node(1, false, "a", "a");
static Node v11 = new Node(11, false, "b", "b");
static Node v111 = new Node(111, true, "c", "c");
static Node v2 = new Node(2, true, "d", "d");
static Map<String, Node[]> data = new HashMap<String, Node[]>();
static {
data.put("", new Node[] { v1, v2 });
data.put("1", new Node[] { v11 });
data.put("11", new Node[] { v111 });
}
static public Node[] getData(String id) {
Node[] temp = null;
return (temp = data.get(id)) == null ? new Node[0] : temp;
}
private String id = "";
private Node[] nodes;
public String execute() {
if (id == null || id.trim().length() < 1) {
id = "";
}
nodes = getData(id);
return "success";
}
public void setId(String id) {
this.id = id;
}
public Node[] getNodes() {
return nodes;
}
}
该Action使用一Map模拟来自数据库的查询内容， 简化操作。其间有涉及到一自定义类型 Node, 代码如下：
package bean;
public class Node {
private int id;
private boolean leaf;
private String qtip;
private String text;
public Node(){}
public Node(int id,boolean leaf, String qtip,String text) {
this.id=id;
this.leaf=leaf;
this.qtip=qtip;
this.text=text;
}
public String toString() {
return "{id:"+id+"," +
"leaf:"+leaf+"," +
"qtip:\""+qtip+"\"," +
"text:\""+text+"\"}";
}
... 省去属性对应的setter/getter方法
}
3. struts.xml
Action写后不忘在struts.xml文件中配置，内容如下：
<struts>
<package name="enterinfo" extends="json-default">
<action name="topicCategory" class="com.briup.TopicCategoryAction">
<result type="json"/>
</action>
</package>
</struts>
最后 temp.html 运行效果如下：