第十二讲：ExtJS组件之TreePanel(下)

vargChildNode2 =newExt.tree.TreeNode({
id:"gChildNode2",
text:"孙子节点2"
})
//孙子节点
vargChildNode3 =newExt.tree.TreeNode({
id:"gChildNode3",
text:"孙子节点3"
})
childNode1.appendChild(gChildNode1);
icon:"folder.jpg"
})
root.on("click",function(){
root.getUI().getIconEl().src="folder2.jpg"
});
//子节点
varchildNode1 =newExt.tree.TreeNode({
id:"chileNode1",
text:"子节点1",
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
vartreePanel =newExt.tree.TreePanel({
id:"chileNode2",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendl =newExt.tree.TreePanel({
varsn = sm.getSelectedNodes();
varlength = sn.length;
if(length != 0) {
alert(length);
}else{
alert("没有选择任何节点");
}
}
}
]
})
})
示例六：可编辑的树。
new Ext.tree.TreeEditor(treePanel);
icon:"folder.jpg"
})
//孙子节点
vargChildNode1 =newExt.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1",
icon:"folder.jpg"
})
//孙子节点
vargChildNode2 =newExt.tree.TreeNode({
示例一：树的一些常用配置属性。
Ext.onReady(function(){
varloader=newExt.tree.TreeLoader({
url:"treedata3.js"
});
varroot=newExt.tree.TreeNode({
id:"root",
text:"根节点"
});
root.appendChild(newExt.tree.TreeNode({
id:"child2",
text:"子节点2",
loader:loader
}))
vartree=newExt.tree.TreePanel({
renderTo:"TestTree",
root:root,
width:400,
height:400
});
})
示例三：从JSP中获得数据并构造动态树。
Ext.onReady(function(){
renderTo:"TestTree11",
width:300,
height:400,
root:root,
bbar:[
{
text:"获得选择的节点",
handler:function(){
varsm = treePanel.getSelectionModel();
varsn = sm.getSelectedNode();
示例七：按指定属性进行排序。
newExt.tree.TreeSorter(treePanel,{
property:"id"
})
示例八：替换Tree中图片。
Ext.onReady(function(){
//根节点
varroot =newExt.tree.TreeNode({
id:"root",
text:"根节点",
response.getWriter().write(tree.toString());
%>
示例四：TreeSelectionModel选择模型。
Ext.onReady(function(){
//根节点
varroot =newExt.tree.TreeNode({
id:"root",
text:"根节点"
url:"treedata3.js"
});
varroot=newExt.tree.TreeNode({
id:"root",
text:"根节点",
checked:true,//true则在text前有个选中的复选框,false则text前有个未选中的复选框,默认没有任何框框
expanded:true,//是否展开
id:"chileNode3",
text:"子节点3"
})
root.appendChild(childNode1);
root.appendChild(childNode2);
root.appendChild(childNode3);
vartreePanel =newExt.tree.TreePanel({
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
varchildNode2 =newExt.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
varchildNode3 =newExt.tree.TreeNode({
childNode1.appendChild(gChildNode2);
childNode1.appendChild(gChildNode3);
//子节点
varchildNode2 =newExt.tree.TreeNode({
id:"chileNode2",
text:"子节点2"
})
//子节点
varchildNode3 =newExt.tree.TreeNode({
})
//子节点
varchildNode1 =newExt.tree.TreeNode({
id:"chileNode1",
text:"子节点1"
})
//孙子节点
vargChildNode1 =newExt.tree.TreeNode({
id:"gChildNode1",
text:"孙子节点1"
})
//孙子节点
root:root,
width:400,
height:400,
animate:false,//收缩动画
autoHeight:true,//自动高度
enableDrag:true,//是否可以拖动
//enableDD:true, //drap和drop
enableDrop:true,//放置节点
lines:false,//节点间虚线
//根节点
varroot =newExt.tree.AsyncTreeNode({
id:"root",
text:"根节点",
loader:newExt.tree.TreeLoader({
url:"AsyncServer2.jsp"
})
})
vartreePanel =newExt.tree.TreePanel({
if(sn !=null) {
alert(sn.text);
}else{
alert("没有选择任何节点");
}
}
}
]
})
})
示例五：选择多个节点。
Ext.onReady(function(){
//根节点
varroot =newExt.tree.TreeNode({
id:"root",
text:"根节点"
qtip:"根节点",//提示信息
singleClickExpand:true//单击文本展开
});
root.appendChild(newExt.tree.TreeNode({
id:"child1",
text:"子节点1"
}))