ExtJS学习笔记二 Tree的Treepanel使用

Virgo_S

浏览: 1153695 次
性别:
来自: 北京

最近访客更多访客>>

xiaoxiaocn

loveling1206

cjf210

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT JavaScript 框架 HTML Servlet

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
    <link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
    <script type="text/javascript" src="extjs/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
	Ext.onReady(function() {
		var Tree = Ext.tree; 

	   	//定义根节点的Loader 
	   	var treeloader=new Tree.TreeLoader({
	   		dataUrl:'TreeServlet'   //指定的URL
	   	}); 
	
	   	//异步加载根节点 
	   	var rootnode=new Tree.AsyncTreeNode({ 
	    	id:'1', 
	        text:'目录树根节点' 
		}); 
	     
	   	var treepanel = new Tree.TreePanel({ 
			//renderTo:"tree_div",
//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。 
	        el:'tree',        //填充区域 
	        rootVisible:true,     //隐藏根节点 
	        border:true,          //边框 
	        animate:true,         //动画效果 
	        autoScroll:true,      //自动滚动 
	        enableDD:false,       //节点是否可以拖拽              
	        containerScroll:true, 
               //root:rotnode,        //两种设置root节点的方法，
//一种配置root，另一种就是setRootNode
	        loader:treeloader             
		}); 
	
	   //设置根节点 
	   //treepanel.setRootNode(rootnode); 
	
	   //响应事件，传递node参数 
	
	   treepanel.render();            
	   rootnode.expand(false,false); 

	});

    </script>
</head>
<body>
        <div id="tree" style="height:500px;width:500px;"></div>
</body>
</html>

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

[{
        id: 1,
        text: 'A leaf Node',
        leaf: true
    },{
        id: 2,
        text: 'A folder Node',
        children: [{
            id: 3,
            text: 'A child Node',
            leaf: true
        }]
   }]

我的后台是用Java写的一个servlet：

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    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'}]"; 


    response.getWriter().write(str.toString());	
}

静态树

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){ 
      //定义树的跟节点 
      var root=new Ext.tree.TreeNode({ 
            id:"root",//根节点id 
            text:"我是树根" 
      }); 
      
      //定义树节点 
      var c1=new Ext.tree.TreeNode({ 
        id:'c1',//子结点id 
        text:'大儿子' 
      }); 
      var c2=new Ext.tree.TreeNode({ 
        id:'c2', 
        text:'小儿子' 
      }); 
      var c22=new Ext.tree.TreeNode({ 
        id:'c22', 
        text:'大孙子' 
      }); 

      root.appendChild(c1);//为根节点增加子结点c1 
      root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^ 
      c1.appendChild(c22);//为c1增加子节点c22 

      //生成树形面板 
      var tree=new Ext.tree.TreePanel({ 
        renderTo:"tree", 
        root:root,//定位到根节点 
        animate:true,//开启动画效果 
        enableDD:false,//不允许子节点拖动 
        border:false,//没有边框 
        rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性 
     }); 

}); 
</script>
</head>
<body>
<div id="tree" style="height: 500px; width: 500px;"></div>
</body>
</html>

分享到：

ExtJS学习笔记 layout的9种样式风格总 ... | extjs学习资源

2008-12-05 11:04
浏览 11151
评论(1)
分类:编程语言
查看更多

1 楼唯美古典 2009-10-08

不错的总结！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论