Ext 最简单的树的生成

编程足球

浏览: 256969 次
性别:
来自: 福州

最近访客更多访客>>

awerty3450p

hou3417202

cicr

eric_lee2019

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT json JavaScript ITeye QQ

在Ext中树是经验用到的，最简单的一棵树如下：

treePanelFirst = new Ext.tree.TreePanel({
    // 自动创建树加载器 TreeLoader
    dataUrl:'context.jsp',
    root: {
        nodeType: 'async',
        text: 'Ext JS'
    }
});

只要dataUrl正确的返回符合javascript数组类型的json就可以自动解读成树。
下面的代码和上面实现的功能一致

treePanelFirst = new Ext.tree.TreePanel({        
//      树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。
//      返回值必须是以树格式的javascript数组。
        loader: new Ext.tree.TreeLoader(
        {
			dataUrl: 'context.jsp'
		}),
//		树的根节点对象 ,采用异步的方式，用于动态加载子节点
        root:new Ext.tree.AsyncTreeNode({
        	text:'Ext JS'
        })
});

还有一种方法一样可以创建一棵树，效果和上面的一样：

ApiPanel = function() {
    ApiPanel.superclass.constructor.call(this, {
//      树加载器（TreeLoader）的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。
//      返回值必须是以树格式的javascript数组。
        loader: new Ext.tree.TreeLoader(
        {
			dataUrl: 'context.jsp'//左侧目录数据源
		}),
//		采用异步的方式，用于动态加载子节点
        root: new Ext.tree.AsyncTreeNode(
        {
//        	只读属性，该节点所显示的文本.
            text:'Ext JS',
        })
    });
};
Ext.extend(ApiPanel, Ext.tree.TreePanel, {
    
});

treePanelFirst = new ApiPanel();

最后在html文件中进行测试

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">  
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="../ext-all.js"></script>      
  	<script type="text/javascript" src="../Tree/TreePanelTest.js"></script>
  	<script type="text/javascript">
  	    Ext.onReady(function(){
			treePanelFirst.render("header");
  	    });
	</script> 
  </head>
  <body>
		<div id="header"></div>
  </body>
</html>

上面三种方法效果是一样的，当然在创建树的时候还有很多属性可以指定常用的如下：

//     	True表示为显式建立头部元素，false则是跳过创建。
//      缺省下，如不创建头部，将使用title的内容设置到头部去，
//		如没指定title则不会。如果设置好title，但头部设置为false，那么头部亦不会生成。
        header: true,
        width: 248,
        minSize: 175,
        maxSize: 500,

//      True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
        collapsible: true,
        margins:'0 0 5 5',
        cmargins:'0 0 0 0',
        
//      是否隐藏根节点,ture就不隐藏根节点，false不显示根节点
        rootVisible:false,
        
//		true	表示在面板上设置 overflow:auto和出现滚动条
//      false 	表示裁剪所有溢出的部分，不设置默认为false
        autoScroll:true,
        animCollapse:false,
        
//     	是否以动画形式展开.会慢慢展开
        animate: true,
        
//      是否显示节点左侧的小三角形头的图标
        useArrows:false,
        
//      是否显示区分结构的虚线,useArrows:false情况下才有效果
        line:true,
        
//      是否允许拖放，true可以拖放
        enableDD:true,
        
        collapseMode:'mini',
        
//      True 表示为展开/闭合的轮换按钮出现在面板头部的左方,false表示为在右方
        collapseFirst:false,

现在来看看后台要传递过来的数据：

	String jsonData = "[{text:'测试1',leaf: true ,msg:'moreMessage1'}, " +
	                   "{text:'测试2',leaf: true ,msg:'moreMessage2'}, " + 
	                   "{text:'测试3',leaf: true ,msg:'moreMessage3'}]";

	System.out.print(jsonData);
	out.write(jsonData);

其实后台就是传递过来json数组,可以由各种方法来实现。结果如下：

如果要实现多层结构的树则可以返回下面类似的json数据：

	String jsonData = "[{" + 
							"text:'测试1',msg:'moreMessage1',leaf: false," + 
							"children:[ " + 
							            "{text:'测试1-1',msg:'moreMessage1-1',leaf:true}," + 
							            "{text:'测试1-2',msg:'moreMessage1-2',leaf:true}," + 
							            "{text:'测试1-3',msg:'moreMessage1-3',leaf:true}" + 
							          "]" +
						"}," +
	                   "{text:'测试2',msg:'moreMessage2',leaf:true}, " + 
	                   "{text:'测试3',msg:'moreMessage3',leaf:true}  " + 
	                   "]";

结果如下：

本人新手，刚刚开始学习Ext，有错请指出，谢谢

分享到：

Tomcat 7.0 整合到Myeclipse 报java.lang. ... | Node cannot be inserted at the specified ...

2011-05-24 14:59
浏览 1567
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext 最简单的树的生成

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext 最简单的树的生成

评论

发表评论

相关推荐

Ext 右上角小图标 tool

Ext3.4源码之Store -> load() 与reload()

Ext3.4源码之Ext.apply()和 Ext.applyif()

ext-basex.js 进行Ext.Ajax.request 同步请求 FF无法正常

Ext 上传附件返回值 <pre>json</pre>格式,ff报错

extjs store中数据转换成json

view.getComputedStyle(div.firstChild.firstChild, null) is null

Ext Grid 横行滚动条

Ext.data.Store 小细节收集

Ext.Ajax.request 小问题收集

拼音输入法下输入字母Ext combo 无法进行过滤修正

Ext 2.x combo keyup事件无法响应

Ext Combo 添加空值并且显示出来

Ext Grid 小细节收集

Ext Panel 动态 加载 html

Ext 小错误整合

Ext ajax JSON 数据遍历

Ext.TreePanel 的小问题集合

jsp 进行下载时候乱码 ff正常，IE打开新页面

Ext 生成树递归算法

最近访客更多访客>>

Ext Panel 动态加载 html