二、树实例.doc

树实例1.简单树实例Javascript源码：/*SimpleTree简单树实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/创建tree的面板即TreePanelvartree=newExt.tree.TreePanel(title:simpleTree的练习,id:extExample-tree-simpleTree,/设置一个idautoScroll:true,/自动出现滚动条enableDD:false,/是否支持拖拽效果containerScroll:true,/是否支持滚动条rootVisible:true,/是否显示跟节点loader:newExt.tree.TreeLoader(dataUrl:simpleTree.json/异步读取的url),/*这是tree中最常用的一个toolbar，比如在上面添加刷新按钮*/tools:id:refresh,/根据id的不同会出现不同的按钮handler:function()vartree=Ext.getCmp(extExample-tree-simpleTree);tree.root.reload();/让根节点重新加载tree.body.mask(数据加载中,x-mask-loading);/给tree的body加上蒙版tree.root.expand(true,false,function()tree.body.unmask();/全部展开之后让蒙版消失););/创建根节点varroot=newExt.tree.AsyncTreeNode(text:木叶村,draggable:false,/是否可以拖拽id:extExample-tree-simpleTree-treeRoot);/设置树的根节点tree.setRootNode(root);/*让根节点展开这个函数有三个参数分别为1.Booleandeep如果设置为true则将全部节点全部展开2.Booleananim如果设置为true则在展开时伴随的动画效果3.Functioncallback一个回调函数，当全部展开之后调用的*/root.expand(true,false);/给tree的节点添加点击事件tree.on(click,function(node)varnodeId=node.id;varnodeText=node.text;alert(节点的id为：+nodeId+-节点的名字为：+nodeText);/createandshowwindowvarwin=newExt.Window(width:350,height:260,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:tree);win.show();); Html源码：简单树实例-9iExt中文社区json的格式如下:      text:卡卡西班,   id:01,   allowDrag:false,   children:    text:小樱,id:0101,leaf:true,allowDrag:true,    text:鸣人,id:0102,leaf:true,allowDrag:true,    text:佐助,id:0103,leaf:true,allowDrag:true       2异步加载树实例Javascript源码/*AsynchonousTree异步加载树实例*author9iE**三人行-取之于网,用之于网!*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/创建tree的面板即TreePanelvartree=newExt.tree.TreePanel(title:异步加载树的练习,id:extExample-tree-asynchronousTree,/设置一个idautoScroll:true,/自动出现滚动条enableDD:false,/是否支持拖拽效果containerScroll:true,/是否支持滚动条rootVisible:true,/是否显示跟节点loader:newExt.tree.TreeLoader(dataUrl:tree_asynchronousTree.jsp?id=/异步读取的url),/*这是tree中最常用的一个toolbar，比如在上面添加刷新按钮*/tools:id:refresh,/根据id的不同会出现不同的按钮handler:function()vartree=Ext.getCmp(extExample-tree-asynchronousTree);tree.loader.dataUrl=tree_asynchronousTree.jsp;tree.root.reload();/让根节点重新加载tree.body.mask(数据加载中,x-mask-loading);/给tree的body加上蒙版tree.root.expand(true,false,function()tree.body.unmask();/全部展开之后让蒙版消失););/创建根节点varroot=newExt.tree.AsyncTreeNode(text:木叶村,draggable:false,/是否可以拖拽id:extExample-tree-asynchronousTree-treeRoot);/设置树的根节点tree.setRootNode(root);/*让根节点展开这个函数有三个参数分别为1.Booleandeep如果设置为true则将全部节点全部展开2.Booleananim如果设置为true则在展开时伴随的动画效果3.Functioncallback一个回调函数，当全部展开之后调用的*/root.expand();/给tree的节点添加点击事件tree.on(click,function(node)if(!node.isLeaf()node.expand(););/在更改beforload事件tree.on(beforeload,function(node)vartree=Ext.getCmp(extExample-tree-asynchronousTree);vartreeid=node.id;if(treeid!=extExample-tree-asynchronousTree-treeRoot)varurl=tree_asynchronousTree.jsp?id=+treeid;/在load之前重新封装dataUrltree.loader.dataUrl=url;);/createandshowwindowvarwin=newExt.Window(width:350,height:260,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:tree);win.show();); Html源码：异步加载树实例-9iExt中文社区json的格式如下如果节点有孩子的时候格式如下:      text:卡卡西班,   id:01,   leaf:false   节点没有有孩子的时候格式如下:      text:鸣人,   id:01,   leaf:true   3编辑节点树实例Javascript源码：Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/创建tree的面板即TreePanelvartree=newExt.tree.TreePanel(title:节点可直接编辑树的练习,id:extExample-tree-editNodeTree,/设置一个idautoScroll:true,/自动出现滚动条enableDD:false,/是否支持拖拽效果containerScroll:true,/是否支持滚动条rootVisible:true,/是否显示跟节点loader:newExt.tree.TreeLoader(dataUrl:simpleTree.json/异步读取的url),tools:id:refresh,handler:function()vartree=Ext.getCmp(extExample-tree-editNodeTree);tree.root.reload();/让根节点重新加载tree.body.mask(数据加载中,x-mask-loading);/给tree的body加上蒙版tree.root.expand(true,false,function()tree.body.unmask();/全部展开之后让蒙版消失););/创建根节点varroot=newExt.tree.AsyncTreeNode(text:木叶村,draggable:false,/是否可以拖拽id:extExample-tree-editNodeTree-treeRoot);/设置树的根节点tree.setRootNode(root);root.expand(true,false);/给tree创建一个可修改的容器，即TreeEditorvartreeEditer=newExt.tree.TreeEditor(tree,/将tree组建的实例放入allowBlank:false/输入的值不可以为空);/*为创建的treeEditer添加事件有两个事件最为常用，一个为beforestartedit另一个为complete从名字就可以看出，beforestartedit事件是在编辑前的事件，因此可以通过它来判断那些节点可以编辑那些不可以。complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。*/treeEditer.on(beforestartedit,function(treeEditer)vartempNode=treeEditer.editNode;/将要编辑的节点if(tempNode.isLeaf()returntrue;elsereturnfalse;);/*complete事件带有三个参数分别为1.Editorthis当前编辑组建即TreeEditor2.Mixedvalue编辑之后的值3.MixedstartValue编辑之前的值*/treeEditer.on(complete,function(treeEditer,newValue,oldValue)varnodeEdited=treeEditer.editNode;/得到编辑之后节点if(newValue=oldValue)returnfalse;else/开始向后台传输数据并有editTree.jsp进行处理Ext.Ajax.request(url:tree_editTree.jsp,method:post,params:empName:newValue,empOldName:oldValue,success:function(response,option)varresult=response.responseText;alert(result);,failure:function(response,option)nodeEdited.setText(oldValue);/如果失败则将改过的节点恢复原状alert(异步通讯失败，请与管理员联系！);););/createandshowwindowvarwin=newExt.Window(width:350,height:260,minWidth:300,minHeight:200,plain:true,title:Ext.fly(page-title).dom.innerHTML,layout:fit,border:false,closable:false,items:tree);win.show();); Html源码：可编辑树实例-9iExt中文社区4拖拽树的实例Javascript源码：*/Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;/applicationmainentrypointExt.onReady(function()Ext.QuickTips.init();/创建tree的面板即TreePanelvartree=newExt.tree.TreePanel(title:tree节点拖拽练习,id:extExample-tree-simpleTree,/设置一个idautoScroll:true,/自动出现滚动条enableDD:true,/是否支持拖拽效果containerScroll:true,/是否支持滚动条rootVisible:true,/是否显示跟节点loader:newExt.tree.TreeLoader(dataUrl:simpleTree.json/异步读取的url),/*这是tree中最常用的一个toolbar，比如在上面添加刷新按钮*/tools:id:refresh,/根据id的不同会出现不同的按钮handler:function()vartree=Ext.getCmp(extExample-tree-simpleTree);tree.root.reload();/让根节点重新加载tree.body.mask(数据加载中,x-mask-loading);/给tree的body加上蒙版tree.root.expand(true,false,function()tree.body.unmask();/全部展开之后让蒙版消失););/创建根节点varroot=newExt.tree.AsyncTreeNode(text:木叶村,draggable:false,/是否可以拖拽id:extExample-tree-simpleTree-treeRoot);/设置树的根节点tree.setRootNode(root);/*让根节点展开这个函数有三个参数分别为1.Booleandeep如果设置为true则将全部节点全部展开2.Booleananim如果设置为true则在展开时伴随的动画效果3.Functioncallback一个回调函数，当全部展开之后调用的*/root.expand(true,false);/*现在开始解析tree拖拽的事件。常用的事件有nodedrop以及nodedragover事件。这两个事件足以将拖拽功能完成。首先是nodedrop事件，它有一个参数对象e，这个对象还有三个很主要的属性，分别为：1.dropNode为在拖动时鼠标抓住的节点2.target为将要放置在某处的节点3.point为被放置的状态，分别有append表示