《ExtJs学习资料61-可拖拽树实例.doc》由会员分享，可在线阅读，更多相关《ExtJs学习资料61-可拖拽树实例.doc（2页珍藏版）》请在三一文库上搜索。
1、ExtJs学习资料可拖拽树实例2021年5月9日星期日1、引入ExtJs框架文件（存入Global.js文件中）document.write( );document.write();document.write();document.write();2、引入Global.js文件 .icon background:url(icon.gif) 0 0 no-repeat !important 3、效果图=4、JS源代码Ext.onReady(function()Ext.QuickTips.init();/创建tree的面板即TreePanelvar tree = new Ext.tree.Tre
2、ePanel(title: tree节点拖拽练习, id: extExample-tree-simpleTree,/设置一个idframe:true, autoScroll: true,/自动出现滚动条enableDD: true,/是否支持拖拽效果containerScroll: true,/是否支持滚动条rootVisible: true,/是否显示跟节点loader: new Ext.tree.TreeLoader( dataUrl: ./ServerFile/simpleTree.asp ),/异步读取的url/* 这是tree中最常用的一个toolbar，比如在上面添加刷新按钮*/t
3、ools: id: refresh,/根据id的不同会出现不同的按钮handler: function()var tree = 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(); /全部展开之后让蒙版消失););var root = new Ext.tree.AsyncTreeNode(
4、/创建根节点id: extExample-tree-simpleTree-treeRoot, text: 木叶村, draggable: false/是否可以拖拽);tree.setRootNode(root); /设置树的根节点/*让根节点展开这个函数有三个参数分别为 1.Boolean deep如果设置为true则将全部节点全部展开 2.Boolean anim如果设置为true则在展开时伴随的动画效果 3.Function callback 一个回调函数，当全部展开之后调用的 */root.expand(true, false);/* 现在开始解析tree拖拽的事件。 常用的事件有nod
5、edrop以及nodedragover事件。这两个事件足以将拖拽功能完成。 首先是nodedrop事件，它有一个参数对象e，这个对象还有三个很主要的属性，分别为： 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。 其次是nodedragover事件，从名字上就可以看出，他是当节点被拖到某个节点上所执行的事件。 它也有相同的参数对象e，该对象和的属性与nodedrop的e对象属性一致。*/tree.on(nodedrop, function(e)var cu
6、rTree = e.tree;/得到当前的treevar tmpDropNode = e.dropNode; var tmpDropedNode = e.target; var dropType = e.point;Ext.Ajax.request(url: ./ServerFile/tree_dragTree.asp,method: post,params: begin: tmpDropNode.text, end: tmpDropedNode.text,type: dropType ,success: function(response, option)var result = respo
7、nse.responseText; alert(result);,failure: function(response, option) /nodeEdited.setText(oldValue);/如果失败则将改过的节点恢复原状alert(异步通讯失败，请与管理员联系！);););/创建窗体并显示var win = new Ext.Window(width: 230, height: 200, minWidth: 200, minHeight: 200, plain: true, frame:true,title: Ext.fly(page-title).dom.innerHTML, layout: fit, border: false, closable: false, items: tree);win.show(););第 2 页 / 共 2 页