Ext.tree.TreePanel树形面板

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]

});