1.简单的树
var tree =new Ext.tree.TreePanel({
region:'center',
//True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible:true,
title:'标题',//标题文本
width: 200,
border :false,//表框
autoScroll:true,//自动滚动条
animate :true,//动画效果
rootVisible:true,//根节点是否可见
useArrows: true, //小箭头,默认为+ -;
split:true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',//添加可拖动插件
containerScroll: true
}
},
tbar:[{
text:'展开',
handler:function(){
tree.expandAll();
}
},'-',{
text:'折叠',
handler:function(){
tree.collapseAll();
tree.root.expand();
}
}],
listeners: {
click:function(node) {
//得到node的text属性
Ext.Msg.alert('消息','你点击了: "'+ node.attributes.text+"'");
}
}
});
var root =newExt.tree.TreeNode({text:'我是根'});
var root_node1 =newExt.tree.TreeNode({text:'我是根的1枝'});
var root_node2 =newExt.tree.TreeNode({text:'我是根的2枝'});
//插入节点为该节点的最后一个子节点
root.appendChild(root_node1);
root.appendChild(root_node2);
//设置根节点
tree.setRootNode(root);
newExt.Viewport({
items: [tree]
});