一个ext tree的例子

来源:互联网 时间:1970-01-01

<script type="text/javascript">

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:'我是鼠标提示',//如果有qtip属性,则必须要有Ext.QuickTips.init()这句话
children:[{
text:'01-01',
leaf:true //这里为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.baidu.com",//通过点击节点,可以链接到一个地址
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();//展开所有节点
});
</script>

注:body中应该有个<p id='tree'></p>,最好给其设置合适的高度,用来显示tree。

页面截图:


相关阅读:
Top