`
Virgo_S
  • 浏览: 1151122 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS学习笔记二 Tree的Treepanel使用

    博客分类:
  • JS
阅读更多
    最近学习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>






分享到:
评论
1 楼 唯美古典 2009-10-08  
不错的总结!

相关推荐

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJS使用笔记

    ExtJS是一个开源的JavaScript库,主要用于...通过本笔记的学习,可以掌握ExtJS在前端开发中的应用,理解各个组件和管理器的使用方法,以及一些针对特定浏览器的布局技巧,为创建美观、高效的用户界面打下坚实的基础。

    extjs实例与学习资料

    因为前段时间有两个专案要用到extjs技术,所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括...

    ext tree json 例子(不含EXT包)

    最后,`extjs学习笔记三[Ext+json+jsp构建的动态树].mht`可能涵盖了一个基于EXT JS、JSON和JSP(Java Server Pages)构建动态树的教程。JSP通常用于动态生成HTML页面,而在这个案例中,它可能被用来生成JSON数据,...

    入门基础学习 ExtJS笔记(一)

    本文将基于标题“入门基础学习 ExtJS笔记(一)”和描述,介绍ExtJS的基础知识,特别是如何创建一个基本的界面框架。 首先,要使用ExtJS,我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中,我们看到引用...

    Ext 资料snow

    3. **Tree组件**:`Extjs tree的相关组件及属性 .doc`则关注ExtJS中的TreePanel,用于展示层次结构的数据。文档可能会介绍如何配置节点,添加拖放功能,以及如何通过API操作树结构。 4. **事件处理**:`事件处理EXT...

Global site tag (gtag.js) - Google Analytics