Ext 最简单的树的生成

最新推荐文章于 2021-10-25 11:31:33 发布

LGF124241877

最新推荐文章于 2021-10-25 11:31:33 发布

阅读量162

点赞数

分类专栏： Ext 文章标签： EXT json JavaScript ITeye QQ ViewUI

本文链接：https://blog.csdn.net/LGF124241877/article/details/83925964

版权

Ext 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

在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数组,可以由各种方法来实现。结果如下：
[img]http://124241877-qq-com.iteye.com/upload/picture/pic/90917/b3069a4c-5203-3ad3-a478-a938492e4f1f.jpg[/img]

如果要实现多层结构的树则可以返回下面类似的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}  " + 
	                   "]";

结果如下：
[img]http://124241877-qq-com.iteye.com/upload/picture/pic/90919/76fc5d14-d732-3419-aa07-5e13d6635285.jpg[/img]
本人新手，刚刚开始学习Ext，有错请指出，谢谢