求用Extjs做的动态树~~很急啊

时间:2008-06-22 13:32:17   来源:论坛整理  作者:  编辑:chinaitzhe
谁知道Extjs要怎么做动态树，网上写得太粗了，
而且使用Extjs需要哪些文件和资源包，也不知道到哪下啊！！
请教高人指点！！
很急，头儿在摧了！！：（
请尽量说得具体点，没办法，太专业了看不懂……
网友回复:此回复为自动发出,仅用于显示而已，并无任何其他非凡作用
楼主截止到2008-06-20 11:21:06的汇总数据：
注册日期:2007-7-21
上次登录:2008-6-18
发帖数:12 发帖分:350
结贴数:9 结贴分:220
结贴率:75.00% 结分率:62.86%
楼主加油
网友回复:extjs自带的例子中就有啊。在ext\examples\tree下面，很具体的了。

只要构建好json数据就可以了。

extjs官方地址：www.extjs.com ,开发的话建议你找个辅助插件，不然会死的很惨。还有就是在firefox下开发会更好，因为它有个firebug的插件很酷的哦。eclipse有这方面的插件。或者用Spket IDE（它也提供eclipse的插件似乎，不过我是直接用IDE的）

直接下个extjs就行了，纯js的，有些动态功能是用php写的（主要就是拼接json数据），你只要看实现方式，然后用java生成符合条件的数据就ok了。
网友回复:不知道楼上英文怎么样？不好的话，可就费劲了。

Extjs是很不多的一个东西，我很喜欢。功能强大的ajax UI库。另外他封装了很多类，异步调用也很好用。

官网：http://extjs.com/
下载地址：http://extjs.com/products/extjs/download.php
下载下面两个东西
Ext JS 2.1 SDK 开发工具包
Ext JS 2.1 API Documentation API文档


解压缩SDK，里面的这个目录build和adapter里的js,还有根目录下面的ext-all.js，三个位置的代码代码东西需要你引用到你的工程里。
resources里面的目录里的css都是你应该引进工程的。
直接把目录和文件考过去就好，不用自己挑。

里面的examples是例子。examples/tree里面都是tree的例子。估计是你想要的。仔细研究一下呀。

一下是在工程中的三个引用
<link rel="stylesheet" type="text/css" href="你的脚本目录/resources/css/ext-all.css" /> //样式
<script type="text/javascript" src="你的脚本目录/adapter/ext-base.js"> </script> //自己的适配器另外还有YUI的，prototype的，现在一般用ext-base也就是自己的。
<script type="text/javascript" src="你的脚本目录/ext-all.js"> </script>所有的API，类。都在这里面了。有点儿大。不过ext提供了定制功能。不过建议lz先报明白，再去定制。

具体的API使用要靠楼主自己去努力了。加油
网友回复:
引用 2 楼 mxlmwl 的回复:
extjs自带的例子中就有啊。在ext\examples\tree下面，很具体的了。

只要构建好json数据就可以了。

extjs官方地址：www.extjs.com ,开发的话建议你找个辅助插件，不然会死的很惨。还有就是在firefox下开发会更好，因为它有个firebug的插件很酷的哦。eclipse有这方面的插件。或者用Spket IDE（它也提供eclipse的插件似乎，不过我是直接用IDE的）

直接下个extjs就行了，纯js的，有些动态功能是用php写的（主要就是拼接j…


客户端Debug用 firefox firebug 插件
开发用Eclipse aptana 插件 (我觉得这个更好用) 楼主都可以试试。

网友回复:动态树~~~~

看下这篇文章吧~~~~

http://www.zhuaxia.com/item/665011388/?logId=207
网友回复:我是在原来的系统里面加一个树，所以不敢轻易的改什么东西，最好是下一个包，或者是一个xml文件就能搞定的！！！
网友回复:那你没必要一定要考虑用extjs啊。比如csdn的这个树就不错啊。meizz的这个树你搜索可以下载到的。
网友回复:CSDN这个自己定义了一个jsp标签，我要换图标，没太看懂它的代码

网友回复:呵呵，不知道以下地址还能不能下载，我这个已经是很久以前的了，也从来没用过。

MzTreeView 1.0 开发文档
文档
开发文档: http://www.meizz.com/Web/Article.asp?id=436
控件下载: http://www.meizz.com/Web/Download/MzTreeView10.rar
应用示例: http://www.meizz.com/Web/Demo/MzTreeView10.htm

你看看能否下到吧。另外，我这里有个简单一点的树，你看看能不能网上找到原型吧，图片不好贴。阿信的一个树

HTML code





Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/





<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

  <title>目录树(二)</title>

  <meta name="Generator" content="EditPlus">

  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

  <meta name="Keywords" content="树,无限级,fason,阿信,目录树">

<style>

  a{text-decoration:none;color:#000000;}

  a:hover{text-decoration:underline}

  div{font-size:12px;font-family:Vendana}

  img{border:0;}

  .node{margin-left:3px}

  .focus{background-color:#2255bb;color:#FFFFFF;margin-left:3px}

</style>

</head>

<body>

<script language="JavaScript">

<!--

/*****************************

    Author:fason(阿信)

    name:蒲佛信

    EMail:fason_p@163.com

    QQ:29144647

    Date:2003-8-31

*****************************/

function tree(obj,root,target){

    this.obj=obj

    this.node=[]

    this.html=""

    this.current=null

    this.indentstr=""

    this.target=target

    this.icon={

    base        :'images/base.gif',

    close        :'images/close.gif',

    open        :'images/open.gif',

    file        :'images/file.png',

    empty        :'images/empty.png',

    line        :'images/line.png',

    join        :'images/join.png',

    joinbottom    :'images/joinbottom.png',

    plus        :'images/plus.png',

    plusbottom    :'images/plusbottom.png',

    minus        :'images/minus.png',

    minusbottom    :'images/minusbottom.png'

    };

    for(i in this.icon){var tem=new Image();tem.src=this.icon[i]}

    this.createRoot(root)

}



tree.prototype.createRoot=function(root)

{  this.html ="<div><img src='" this.icon.base "' align='absmiddle'>" (root?root:'') "</div>" }



function node(id,pid,txt,link,title,target){

    this.id=id

    this.pid=pid

    this.txt=txt

    this.link=link?link:''

    this.title=title?title:txt

    this.target=target?target:'_blank'

    this.hasChild=false

    this.lastChild=false

    this.isOpen=false

}



tree.prototype.add=function(id,pid,txt,link,target){

    this.node[this.node.length]=new node(id,pid,txt,link,target)

}

tree.prototype.addNode=function(nid){

    for(var i=0;i<this.node.length;i  ){

    this.check(this.node[i])

    if(this.node[i].pid==nid){

    var nNode=this.node[i]

    str="<a href='" nNode.link "' target='" (this.target?this.target:nNode.target) "' class='node' onclick='" this.obj ".highlight(this);" (nNode.link?'':'return(false)') "' title='" nNode.title "'>" nNode.txt "</a>"

    this.drawNode(i)

    this.html ="<div>" this.indentstr str "</div>"

    this.indentstr=""

    if(nNode.hasChild){

    this.html ="<div id='" this.obj i "' style='display:none'>"

    this.addNode(nNode.id)

    this.html ="</div>"

    }

    }

    }

}





tree.prototype.drawNode=function(n){

    this.drawLine(n)

    if(this.node[n].hasChild){

    this.indentstr ="<a href='' onclick='" this.obj ".expand(" n ");return(false)'><img align='absmiddle' src='" (this.node[n].lastChild?this.icon.plusbottom:this.icon.plus) "' id='icon" n "'><img align='absmiddle' src='" this.icon.close "'></a>"

    }

    else this.indentstr  = '<img align="absmiddle" src="'   (this.node[n].lastChild ? this.icon.joinbottom :this.icon.join)   '" alt="" /><img align="absmiddle" src="' this.icon.file '">';



}



tree.prototype.drawLine=function(n){

    for (var i=0;i<this.node.length;i  ){

        if (this.node[i].id == this.node[n].pid){

            this.indentstr = "<img src='" (this.node[i].lastChild?this.icon.empty:this.icon.line) "' align='absmiddle'>"   this.indentstr;

            this.drawLine(i);

            }

    }

}



tree.prototype.expand=function(nid){

    var icon=document.getElementById("icon" nid)

    var child=document.getElementById(this.obj nid)

    var nNode=this.node[nid]

    icon.src=nNode.isOpen?(nNode.lastChild?this.icon.plusbottom:this.icon.plus):(nNode.lastChild?this.icon.minusbottom:this.icon.minus)

    child.style.display=nNode.isOpen?'none':''

    icon.nextSibling.src=nNode.isOpen?this.icon.close:this.icon.open

    icon.parentNode.blur()

    nNode.isOpen=!nNode.isOpen

}



tree.prototype.highlight = function(node) {

    if(!this.current)this.current=node

    this.current.className='node'

    node.className='focus'

    this.current=node

    node.blur()

}



tree.prototype.check = function(node) {

    var last;

    for (var n=0; n<this.node.length; n  ) {

        if (this.node[n].pid == node.id) node.hasChild = true;

        if (this.node[n].pid == node.pid) last= this.node[n].id;

    }

    if (last==node.id) node.lastChild = true;

};



tree.prototype.toString=function(){

    this.node.sort(function(a,b){return a.pid-b.pid})

    this.node.sort(function(a,b){return a.id-b.id})

    this.addNode(0)

    return this.html

}



var a=new tree('a','无限级连树型菜单')

a.add(1,0,"我的主页",'http://www.why100000.com')

a.add(2,0,"友情链接",'../../../../_friendlinks/more_links.asp')

a.add(3,1,"代码收藏")

a.add(4,3,'树型结构')

a.add(5,0,'其他...')

a.add(6,1,'个人相册')

a.add(7,2,'CSDN论坛')

a.add(8,3,'经典技巧')

a.add(9,7,'Web开发')

a.add(10,9,'Javascript')

a.add(11,7,'.Net技术')

a.add(12,2,'IECN论坛')

a.add(13,5,'联系方式','','zhangking@263.net')

a.add(14,10,'Property')

a.add(15,10,'Method')

a.add(16,10,'Event')

a.add(17,16,'onclick')

a.add(18,16,'onkeydown')

a.add(19,16,'onchange')

a.add(20,9,'XML技术')



document.write(a)

//-->

</script>

</body>

</html>
关键字：Extjs,动态,

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面

最新信息

最新代码下载