tree是ext中一个很好用的组件，可以用来显示部门和导航等功能
先贴一个demo例子
Ext.onReady(function() {
var tree = new Ext.tree.TreePanel({
el : 'tree',
loader : new Ext.tree.TreeLoader()
});
var root = new Ext.tree.AsyncTreeNode({
text : '我是根',
children : [
{
text : '01',
qtip : '我是鼠标提示', //必须通过Ext.QuickTips.init();初始化
children : [
{
text : '01-01',
leaf : true
},
{
text : '01-02',
children : [
{
text : '01-02-01',
leaf : true
},
{
text : '01-02-02',
leaf : true
}
]
},
{
text : '01-03',
leaf : true,
href : 'http://www.g.cn',
hrefTarget : '_blank'
} //使用结点连接
]
},
{
text : '02',
leaf : true,
icon : 'user_female.png'
} //自定义结点图标
]
});
tree.setRootNode(root);
tree.render();
tree.on("dblclick", function(node) {
Ext.Msg.alert("你双击的是", node.text);
});
//右键菜单
var contextmenu = new Ext.menu.Menu({
id : 'theContextMenu',
items : [{
text : '选定',
handler : function() {
alert('你选择的是='
+ tree.getSelectionModel().getSelectedNode().text
+ " 结点");
}
}]
});
//右键菜单的显示
tree.on("contextmenu", function(node, e) {
e.preventDefault();
node.select();//结点进入选择状态
contextmenu.showAt(e.getXY());
});
//定义单击事件
tree.on("click", function(node) {
Ext.Msg.show({
title : '提示',
msg : "你单击了" + node,
animEl : node.ui.textNode
});
});
root.expand();
Ext.QuickTips.init(); //初始化接点提示
tree.expandAll();//展开所有结点
});
<body>
<div id="tree" style="height:170px;width:170px;"></div>
</body>看一下展示结果
另外这里有个介绍很全的api 可以参考一下
http://www.cnblogs.com/fmxyw/archive/2009/07/15/1524019.html
总结一下。ext tree的组件要熟悉其api，另外单击双击和右击的事件也可以实现对应的动作。
927
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
