最近项目做完了 没事 就来学习学习EXT JS ，不过 大部分代码是从网上copy 过来 学习的
我最先学会的就是建树了 ，EXT JS 很强大 ，不过看的我头也大了，能建个树我就很高兴了，以后基础知识慢慢学习吧 ，最主要是能看见效果出来
先建个tree.jsp内容如下：
<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'tree.jsp' starting page</title>
<!-- ext类库 -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<!-- 本页的功能代码 -->
<script type="text/javascript" src="tree.js"></script>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
</head>
<body>
<!-- 要有一定高度 EXT 2.0已经改了 不然看不见的 -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div>
</body>
</html>
tree.js的内容如下：
Ext.onReady(function(){
/*
var tree = new Ext.tree.TreePanel({
el:'tree', //绑定 页面上的<div id='tree'>因为树要在这里显示
useArrows:true, //文件夹前显示的图标改变了不在是+号了
autoScroll:true, //True to use overflow:'auto' on the panel's body element
animate:true, //开启动画效果
enableDD:true, //实现拖拽
//是否显示跟节点 rootVisible:false,
containerScroll: true,
//利用Ext.tree.TreeLoader和后台进行数据交换(ajax) ，这里用了一个记事本做的名字叫tree.txt
loader: new Ext.tree.TreeLoader({dataUrl: 'tree.txt'})
});
//TreeNode是不支持ajax的，我们需要把根节点换成 AsyncTreeNode(可以动态的加载数据)
var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});
tree.setRootNode(root);//将树的根节点放到树的面板中
tree.render(); // 开始对树进行 渲染
root.expand();//
*/
var Tree = Ext.tree;
var root=new Tree.TreeNode({
id:'0',
text:'Root',
draggable:false //不允许拖拽
//icon:'im2.gif',//自定义节点图标
});
var node1=new Tree.TreeNode({id:'1',text:'node1'});
var node2=new Tree.TreeNode({id:'2',text:'node2'});
//搞个有超链接的叶子 // hrefTarget:'_blank' 新窗口打开链接
var node11=new Tree.TreeNode({id:'11',href:'test.jsp',text:'右键单击我',leaf:true});
node1.appendChild(node11);//添加一个叶子
var node21=new Tree.TreeNode({id:'21',text:'请左击我',leaf:true});
var node22=new Tree.TreeNode({id:'22',text:'node22',leaf:true});
var node4=new Tree.AsyncTreeNode({
id:'4',
text:'node4',
leaf:false,
loader:new Tree.TreeLoader({dataUrl:'tree.txt'})});
node2.appendChild([node21,node22]);
root.appendChild([node1,node2,node4]);
var treePanel=new Tree.TreePanel({
el:'tree',
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
//是否显示跟节点 rootVisible:false,
containerScroll: true});
treePanel.setRootNode(root);
treePanel.render();
root.expand();
//-----------------其他对我来说牛逼的效果-----------------------------//
//增加点击事件
node21.on('click',function(node){
alert('我是："'+node.text+'"，我的id是："'+node.id+'"');//这里增加你所需要的点击事件
});
//定义右键菜单
var rightClick = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'rMenu1',
text : '菜单1',
//增加菜单点击事件
handler:function (){
alert('TMD点我干嘛！');
}
}, {
id:'rMenu2',
text : '菜单2',
//增加链接
href:'xx.jsp'
}, {
id:'rMenu3',
text : '菜单3'
}]
});
//增加右键点击事件
node11.on('contextmenu',function(node,event){//声明菜单类型
event.preventDefault();
rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
});
});
下面是 tree.txt的内容
[
{text:'01',children:[
{text:'01-01叶子',href:'test.jsp',leaf:true},
{text:'01-02',children:[
{text:'01-02-01叶子',leaf:true},
{text:'01-02-02叶子',leaf:true}
]},
{text:'01-03叶子',leaf:true}
]},
{text:'02叶子',leaf:true}
]
下面就是显示的结果
posted on 2008-05-14 21:48
Crying 阅读(960)
评论(0) 编辑 收藏 所属分类:
EXT2.0