自从一群牛人整出ExtJS这个框架之后,WEB世界就变得更加完美,特别是对追求唯美而却没有多少美术细胞的WEB程序员而言,Ext的出现弥补了他们这方面的缺陷,因为从此以后大多数的美工他们可以用程序来实现,插上了Ext的翅膀,摇身一变,突然你会发现他们居然真的一个个美感十足。
---查阅EXTJS资料时候看到的
最近还在做权限框架这个项目,因为页面是想要展示一个树形结构,所以就想用一下EXTJS这个前台框架,主要是想简单了解一下这个框架。
由于刚刚接触,所以还非常嫩,简单用EXTJS实现一个最简单的树形结构显示(这仅仅是第一篇,随着学习的深入,最后会将我的功能实现,也就是说最后树形结构是要用EXTJS+JSON+SSH2实现的)。
1. 导入EXTJS文件到ECLIPSE中。
2. 新建一个JSP页面
3. 引入EXTJS的js文件和css文件
4. 设置一个显示区域
5. 初始化TreePanel并且添加TreeNode节点
01.
<span style=
"font-size:16px;"
><script>
02.
Ext.onReady(
function
(){
03.
var
tree =
new
Ext.tree.TreePanel({
04.
el:
'tree'
,
05.
//autoHeight :true ,
06.
07.
border:
false
,
08.
draggable:
true
09.
10.
11.
});
12.
//根节点
13.
var
root =
new
Ext.tree.TreeNode({text:
'页面'
});
14.
15.
//一级菜单
16.
var
node1 =
new
Ext.tree.TreeNode({text:
'模块1'
});
17.
var
node2 =
new
Ext.tree.TreeNode({text:
'模块2'
});
18.
var
node3 =
new
Ext.tree.TreeNode({text:
'模块3'
});
19.
20.
//叶子节点
21.
var
node11 =
new
Ext.tree.TreeNode({text:
'操作一'
});
22.
var
node21 =
new
Ext.tree.TreeNode({text:
'操作二'
});
23.
24.
25.
26.
node1.appendChild(node11);
27.
node2.appendChild(node21);
28.
29.
root.appendChild(node1);
30.
root.appendChild(node2);
31.
root.appendChild(node3);
32.
33.
tree.setRootNode(root);
34.
tree.render();
35.
root.expand();
36.
37.
});
38.
</script></span>
6. 显示结果
到此为止,最简单的树形结构就完成了,虽然不过华丽,但是这几句简单的代码就是我日后完成我权限显示树形结构的基石。框架出世,WEB世界完美,其实,不然,基石铺垫,一切才完美。
作者:lfsf802
原文:http://blog.csdn.net/lfsf802/article/details/7669657