ext tree练习

最近学习extjs发现了一个问题,extjs是一个JavaScript的框架,属于前端页面上的,所有完全可以和后天的语言分离,大家在extjs的官方例子中可以看到都是html的格式。也就是说和后台结合的话也是按照某种方式传输数据,干什么又加上各种语言的各种框架。简单问题复杂化。
现在通过例子说明一下。
Java 代码

1. <html>
2. <head>
3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4. <title>Virgo_S</title>
5. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
6. <script type="text/javascript" src="extjs/ext-base.js"></script>
7. <script type="text/javascript" src="extjs/ext-all.js"></script>
8. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
9. <script type="text/javascript">
10. Ext.onReady(function() {
11. var Tree = Ext.tree;
12.
13. //定义根节点的Loader
14. var treeloader=new Tree.TreeLoader({
15. dataUrl:'TreeServlet' //指定的URL
16. });
17.
18. //异步加载根节点
19. var rootnode=new Tree.AsyncTreeNode({
20. id:'1',
21. text:'目录树根节点'
22. });
23.
24. var treepanel = new Tree.TreePanel({
25. //renderTo:"tree_div",
26. //如果使用renderTo,则不能使用setRootNode()方法,需要在TreePanel中设置root属性。
27. el:'tree', // 填充区域
28. rootVisible:true, //隐藏根节点
29. border:true, //边框
30. animate:true, // 动画效果
31. autoScroll:true, // 自动滚动
32. enableDD:false, // 节点是否可以拖拽
33. containerScroll:true,
34. //root:rotnode, //两种设置root节点的方法,
35. //一种配置root,另一种就是setRootNode
36. loader:treeloader
37. });
38.
39. //设置根节点
40. //treepanel.setRootNode(rootnode);
41.
42. //响应事件,传递node参数
43.
44. treepanel.render();
45. rootnode.expand(false,false);
46.
47. });
48.
49. </script>
50. </head>
51. <body>
52. <div id="tree" style="height:500px;width:500px;"></div>
53. </body>
54. </html>

这里说明几点问题:
1.treepanel在render(渲染,呈现)之前一定要有root(根)节点。可以通过配置root属性和setRootNode方法来实现。
2.loader配置选项需要一个Ext.tree.TreeLoader的对象。
3.treeloader是通过一种懒方式,从指定的url加载treenode的子节点。这里要注意的地方就是,结合第一,二条,一定要有 root节点,loader配置的treeloader对象加载的是treenode的子节点,所以一定要设置一个root节点
4.就是响应返回的是一个JavaScript数组,例如
Java 代码

1. [{
2. id: 1,
3. text: 'A leaf Node',
4. leaf: true
5. },{
6. id: 2,
7. text: 'A folder Node',
8. children: [{
9. id: 3,
10. text: 'A child Node',
11. leaf: true
12. }]
13. }]


我的后台是用Java写的一个servlet:
Java 代码

1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2.
3. String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
4.
5.
6. response.getWriter().write(str.toString());
7.
:idea:
静态树
Java 代码

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6. <title>Virgo_S</title>
7. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
8. <script type="text/javascript" src="extjs/ext-base.js"></script>
9. <script type="text/javascript" src="extjs/ext-all.js"></script>
10. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
11. <script type="text/javascript">
12. Ext.onReady(function(){
13. //定义树的跟节点
14. var root=new Ext.tree.TreeNode({
15. id:"root",//根节点 id
16. text:"我是树根"
17. });
18.
19. //定义树节点
20. var c1=new Ext.tree.TreeNode({
21. id:'c1',//子结点id
22. text:'大儿子'
23. });
24. var c2=new Ext.tree.TreeNode({
25. id:'c2',
26. text:'小儿子'
27. });
28. var c22=new Ext.tree.TreeNode({
29. id:'c22',
30. text:'大孙子'
31. });
32.
33. root.appendChild(c1);//为根节点增加子结点c1
34. root.appendChild(c2);//为c1增加子节点c2,相信你已经找到规律了吧^_^
35. c1.appendChild(c22);//为c1增加子节点c22
36.
37. //生成树形面板
38. var tree=new Ext.tree.TreePanel({
39. renderTo:"tree",
40. root:root,//定位到根节点
41. animate:true,//开启动画效果
42. enableDD:false,//不允许子节点拖动
43. border:false,//没有边框
44. rootVisible:false//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
45. });
46.
47. });
48. </script>
49. </head>
50. <body>
51. <div id="tree" style="height: 500px; width: 500px;"></div>
52. </body>
53. </html>
内容概要:本文探讨了在MATLAB/SimuLink环境中进行三相STATCOM(静态同步补偿器)无功补偿的技术方法及其仿真过程。首先介绍了STATCOM作为无功功率补偿装置的工作原理,即通过调节交流电压的幅值和相位来实现对无功功率的有效管理。接着详细描述了在MATLAB/SimuLink平台下构建三相STATCOM仿真模型的具体步骤,包括创建新模型、添加电源和负载、搭建主电路、加入控制模块以及完成整个电路的连接。然后阐述了如何通过对STATCOM输出电压和电流的精确调控达到无功补偿的目的,并展示了具体的仿真结果分析方法,如读取仿真数据、提取关键参数、绘制无功功率变化曲线等。最后指出,这种技术可以显著提升电力系统的稳定性与电能质量,展望了STATCOM在未来的发展潜力。 适合人群:电气工程专业学生、从事电力系统相关工作的技术人员、希望深入了解无功补偿技术的研究人员。 使用场景及目标:适用于想要掌握MATLAB/SimuLink软件操作技能的人群,特别是那些专注于电力电子领域的从业者;旨在帮助他们学会建立复杂的电力系统仿真模型,以便更好地理解STATCOM的工作机制,进而优化实际项目中的无功补偿方案。 其他说明:文中提供的实例代码可以帮助读者直观地了解如何从零开始构建一个完整的三相STATCOM仿真环境,并通过图形化的方式展示无功补偿的效果,便于进一步的学习与研究。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值