ext普通树的静态实现
基于ext3.x
treeFromOrg.html
reorderFromOrg.js
treeFromOrg.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Reorder TreePanel</title> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <script type="text/javascript" src="reorderFromOrg.js"></script> </head> <body> <h1>现在要生成一颗动态树</h1> <div id="tree-div"> </div> </body> </html>
reorderFromOrg.js
/***********************************
创建树
参考官方文档
************************************/
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL='../extjs/resources/images/default/tree/s.gif'
//Ext.QuickTips.init();
var tree=new Ext.tree.TreePanel({
el:'tree-div',
useArrows:true,
animate:true,
collapsible:true,
enableDD:true,
containerScroll:true,
border:false,
autoScroll:true,
rootVisible:true,
width:300,
autoHeight:true
//useArrows:true
//height:100
});
var root=new Ext.tree.TreeNode({
id:"root",
text:"集团公司"
//expanded:true
});
var index = 0;
var subTree = new Ext.tree.TreeNode({
id:'subTree0',
text:'子公司',
listeners:{
//右键事件
"contextmenu":function(node,e){
menu = new Ext.menu.Menu([
{
text:"添加子节点",
handler:function(){
var newNodeName = prompt('子节点名称');
node.appendChild(
new Ext.tree.TreeNode(
{
id:'subTreeDynamic',
text:newNodeName,
listeners:{
"contextmenu":function(node,e){
menu2 = new Ext.menu.Menu([
{
text:"删除当前节点",
handler:function(){
node.destroy();
}
}
]);
menu2.showAt(e.getPoint());
}
}
}
)
);
}
}
]);
menu.showAt(e.getPoint());
}
//监听单击事件
/*"click":function(node){
this.appendChild(new Ext.tree.TreeNode(
{
id:'subTreeDynamic',
text:node.text
}
)
);
}*/
}
});
var subTree1 = new Ext.tree.TreeNode({
id:'subTree1',
text:'子公司1'
});
var subTree2 = new Ext.tree.TreeNode({
id:'subTree2',
text:'子公司2'
});
var subTree3 = new Ext.tree.TreeNode({
id:'subTree3',
text:'子公司3'
});
var subTree4 = new Ext.tree.TreeNode({
id:'subTree4',
text:'子公司4'
});
var subTreeLevel2 = new Ext.tree.TreeNode({
id:'subTreeLevel2',
text:'2级子公司'
});
subTree.appendChild(subTreeLevel2);
root.appendChild(subTree);
root.appendChild(subTree1);
root.appendChild(subTree2);
root.appendChild(subTree3);
root.appendChild(subTree4);
//alert(tree.getRootNode());
tree.setRootNode(root);//设置根节点
tree.render();
}
);