首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

求大神们给个EXT4.0的动态tree的示例!该怎么解决

2012-03-23 
求大神们给个EXT4.0的动态tree的示例!如题。。求会extjs4.0的大神们给个动态tree的示例。。希望详细点。~![解决

求大神们给个EXT4.0的动态tree的示例!
如题。。
求会extjs4.0的大神们给个动态tree的示例。。
希望详细点。~!

[解决办法]
http://www.uspcat.com/portal.php
你需要的答案在这里!!
[解决办法]
ext\examples
[解决办法]
ext doc
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="ext-4/resources/css/ext-all.css" />
<link rel="stylesheet" href="ext-4/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="ext-4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-4/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){

var root=new Ext.tree.TreeNode({text:"root"});

var node2=new Ext.tree.TreeNode({text:"根节点2"});

var node3=new Ext.tree.TreeNode({text:"根节点3"});

var node4=new Ext.tree.TreeNode({text:"根节点4"});

var node1=new Ext.tree.TreeNode({text:"根节点1"});



node2.appendChild(node3);

node2.appendChild(node4);

root.appendChild(node2);

root.appendChild(node1);



var tree2=new Ext.tree.TreePanel({

title:"自定义数据",

width:300,

height:720,

//containerScroll:false,

enableDD: false,

frame:true,

draggable:false,

el:"tree"

});

tree2.setRootNode(root);

tree2.render();

tree2.expandAll();
 
tree2.on('contextmenu', menuShow);

var selectNode;

function menuShow ( node ) {
treeRightMenu.show(node.ui.getAnchor());
node.select();//让右击是选中当前节点
selectNode=node;
}; 

var treeRightMenu = new Ext.menu.Menu({
id: 'treeMenuContext',
items: [  
{text: '添加子节点',handler:function(){
addNode();
}
},{text: '重命名',handler:function(){
rename();
}
},{text: '删除',handler:function(){
deleteNode();
}
}]
});

 function addNode(){
Ext.MessageBox.prompt('添加子节点', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
selectNode.appendChild(new Ext.tree.TreeNode({text:input}));
}
}
}
);
}

function deleteNode(){
Ext.MessageBox.confirm('确认删除', '确认删除此分类?删除后此类别下的所有商品将被删除!', 
function(btn){
if(btn == 'yes') {
selectNode.remove();
}
}

);
}

function rename(){
Ext.MessageBox.prompt('重命名', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
//alert(selectNode.text);
selectNode.setText(input);
}
}
}
);
}

});


</script>

</head>



 

<body style=" margin-left:10px; margin-top:2px;">

<div id="tree" style="width:300px; float:left; clear:both;"></div>

<div id="tree2" style="width:300px; float:left; clear:both; margin-top:10px;"></div>

 

 

</body>

</html>

热点排行