基于ext3.x
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();
}
);
分享到：
相关推荐
ExtJS 中有两种类型的树节点：普通树节点（TreeNode）和异步加载节点（AsyncTreeNode）。普通节点的数据一次性加载，而异步节点则支持按需从服务器动态加载数据，这在处理大量或动态更新的数据时非常有用。异步树...
-重新设计模拟树的下拉列表的实现，避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode，保持和...
-重新设计模拟树的下拉列表的实现，避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode，保持和...
KVM允许Linux内核直接转换为一个hypervisor，从而在普通硬件上运行多个隔离的操作系统实例。 #### 二、部署准备与硬件要求 - **硬件需求**：至少需要一台物理服务器，并且该服务器的CPU需要支持VT (Virtualization...
- 拖动url——创建ext app - 文件管理，树目录变化后（增删改）自动同步到文件列表 - 文件管理，文件列表变化后（增删改）自动同步到树目录 - 中文用户名限制 - 对话框打开关闭动画 - 其他多处优化 ####fix ...
- **Linux Libraries**：重点讲述Linux下的静态和动态库。 **10. 比较五种开源协议** - **GPL**：最严格的开源许可之一。 - **MIT**：宽松型许可。 - **BSD**：限制较少，鼓励商业使用。 - **Apache**：适合于Web...