ExtJs树控件制作

最新推荐文章于 2015-07-11 17:57:16 发布

crowxiao

最新推荐文章于 2015-07-11 17:57:16 发布

阅读量2.8k

点赞数

文章标签： extjs tree dependencies stylesheet json function

本文链接：https://blog.youkuaiyun.com/JIAYOUXIAOYI/article/details/4426155

版权

如果通过js生成树，可以用dtree

dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。下载目录：http://www.destroydrop.com/javascripts/tree/

以下是 extjs树制作说明：

一．动态树制作

关于extjs tree使用,主要是配合TreePanel,AsyncTreeNode,TreeNode,TreeLoader几个配合

可以通过用TreeLoader加载数据生成树

如果要做ExtJS Tree的DEMO，生成TreeLoader()时，尽量不要使用静态的JSON格式文件。

如： Tree.TreeLoader({dataUrl:'/jsondata.txt'});

Tree.TreeLoader({dataUrl:'/jsondata.js'});

下载JSON-lib，地址：http://json-lib.sourceforge.net/

JSON所需包：

Json-lib requires (at least) the following dependencies in your classpath:

jakarta commons-lang 2.3

jakarta commons-beanutils 1.7.0

jakarta commons-collections 3.2

jakarta commons-logging 1.1.1

ezmorph 1.0.4

下载地址

commons 下载地址：http://commons.apache.org/

ezmorph 下载地址：http://ezmorph.sourceforge.net

简单例子：
Ext.onReady(function(){

var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'http://localhost:8080/lab/menus.action'//通过指定类转化成json格式字符串，访//问特定的jsp页面取得字符串 <%=jsonstring %>
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
draggable:false,
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

补充说明：

TreePanel，这是Ext中用来显示树结构的控件，该控件可以通过一个url来加载树的节点信息，并支持异步树节点加载方式。看下面使用TreePanel的代码：

var root=new Ext.tree.AsyncTreeNode(...{
id:"root",
text:"树的根"});
var tree=new Ext.tree.TreePanel(...{
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader(...{url:"treedata.js"}),

//通常url: 'http://localhost:8080/lab/menus.action'
//或'tree.jsp?DID=1', jsp通过处理类调用 <%=处理后的JSON格式字符串%>

//通过net.sf.json.JSONArray， com.tree.JSONTreeNode结合数据库转换成所需要的

//JSON格式字符串

width:100
});

　　在代码中，treedate.js表示服务器的程序，Ext在渲染这棵树，需要加载树节点的时候会向服务器发起一个请求，通过这个请求的返回结果来加载树的节点信息。默认情况下Ext要求服务器端返回的是一个包含树节点信息的JSON数组，格式如下：
　　[{节点对象1},{节点对象2}]
比如treedata.js中可以包含下面的数据：

[...{
id: 1,
text: '子节点1',
leaf: true
},...{
id: 2,
text: '儿子节点2',
children: [...{
id: 3,
text: '孙子节点',
leaf: true
}]
}]

二．静态树制作

不必使用TreeLoader加载，将extjs包放到当前html同级目录下，改名extjs，代码如下：

<html>

<head>

</head>

<body>

</body>

</html>

Ext.onReady(function(){

Ext.QuickTips.init();