ExtJs树的生成

function creatTree(pid, div) {
Ext.BLANK_IMAGE_URL = ctx
+ "/static/extjs/resources/images/default/s.gif";
Ext.QuickTips.init();
// 创建一个简写
var Tree = Ext.tree;
// 定义根节点的Loader
var MyTreeLoader = Ext.extend(Tree.TreeLoader, {
// private override
processResponse : function(response, node, callback) {
var json = response.responseText;
var array = Ext.decode(json);
// hsutil.info(json);
try {
node.beginUpdate();
node.appendChild(this.parseArray(array));
node.endUpdate();


if (typeof callback == "function") {
callback(this, node);
}
} catch (e) {
this.handleFailure(response);
}
},
parseArray : function(array) {
var nodes = [];
for ( var i = 0; i < array.length; i++) {
var o = array[i];
var treeNode = this.createMyNode(o);
nodes.push(treeNode);
}
return nodes;
},
createMyNode : function(o) {
var _attr = {
id : o.id,
text : o.name,
//icon : o.icon,
href:o.href,
leaf:o.leaf == 1?true:false
}


if (o.leaf == 1) {
return new Ext.tree.TreeNode(_attr);
} else {
return new Ext.tree.AsyncTreeNode(_attr);
}
}
});
var treeloader = new MyTreeLoader({
// dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置
});
// 添加一个树形面板
var treepanel = new Tree.TreePanel({
// renderTo:"div-tree",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
// el : div,// 将树形添加到一个指定的div中,非常重要！
width : 200,
minSize : 180,
maxSize : 250,
split : true,
autoHeight : false,
// frame : true,// 美化界面
// width : 200,//面板宽度
// title : '可编辑和拖动的异步树',//标题
// autoScroll : true, // 自动滚动
enableDD : true,// 是否支持拖拽效果
containerScroll : true,// 是否支持滚动条
rootVisible : false, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
border : false, // 边框
animate : true, // 动画效果
loader : treeloader
// useArrows:true
// 树加载
});
// 异步加载根节点
var rootnode = new Tree.AsyncTreeNode({
id : pid,
text : '根节点',
draggable : false,// 根节点不容许拖动
expanded : true
});
// 为tree设置根节点
treepanel.setRootNode(rootnode);
// 响应加载前事件，传递node参数
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = ctx
+ '/cas/getAuthoritiesBySuper?superId=' + pid; // 定义子节点的Loader
});
// 渲染树形
treepanel.render(div);
}

tree.on('checkchange', function(node, checked) {
node.ui.checkbox.checked = checked;
node.attributes.checked = checked;
node.eachChild(function(child) {
child.ui.checkbox.checked = checked;
child.attributes.checked = checked;
child.fireEvent('checkchange', child, checked);
});


var pNode = node.parentNode;
if (!pNode)
return;
for (; pNode.id != TreeMng.root.id; pNode = pNode.parentNode) {
if (checked) {
pNode.ui.checkbox.checked = checked;
pNode.attributes.checked = checked;
}
}

});

效果如下：

出处：http://blog.csdn.net/cl05300629/article/details/9212591