老实说，我第一个学EXT的原因是因为树，它简约而不简单的效果好看多了！但学着学着，我发现自己不只是想学树,而是ext的全部.以下是树的代码.
<!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>hello worldi演示</title>
<!--引入必要的ext库文件-->
<script src="../adapter/ext/ext-base.js"></script>
<script src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
</head>
<body>
<script>
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({//创建树形面板
el:'tree',//绑定的控件
enableDD:true,//是否允许拖入
autoScroll:true,//true表示为在面板body元素上，设置overflow:'auto'和出现滚动条，false 为裁剪所有溢出内容，默认为false
animate:true,//是否以动画形式展开／闭合
useArrows:true,//是否显示节点左侧的小三角形图标
line:false//只有userArrows为false时才起作用，表示是否显示区分结构的虚线
});
var root=new Ext.tree.TreeNode({//创建结点
text:'根结点'
});
var node1=new Ext.tree.TreeNode({
text:'结点1',
listeners:{
'click':function(){
alert('单击事件')
}
}
});
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 node5=new Ext.tree.TreeNode({
text:'结点5'
});
root.appendChild(node1);//追加子结点
root.appendChild(node2);
node2.appendChild(node3);
root.appendChild(node4);
root.appendChild(node5);
tree.setRootNode(root);//设置根结点
tree.render();//构建整颗树
});
</script>
<div id="tree" style="height:300px;"></div>
</body>
</html>
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
