《ExtJs学习资料62-可编辑树实例.doc》由会员分享，可在线阅读，更多相关《ExtJs学习资料62-可编辑树实例.doc（3页珍藏版）》请在三一文库上搜索。
1、ExtJs学习资料可编辑树实例2021年5月8日星期六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: 节点可直接编辑树的练习,id: extExample-tree-editNodeTree,/设置一个idframe:true,autoScroll: true,/自动出现滚动条enableDD: false,/是否支持拖拽效果containerScroll: true,/是否支持滚动条rootVisible: true,/是否显示跟节点loader: new Ext.tree.TreeLoader(dataUrl: ./ServerFile/simpleTree.asp/异步读取的url),tools: id: refresh,handler: function()
3、var tree = 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();/全部展开之后让蒙版消失););var root = new Ext.tree.AsyncTreeNode( /创建根节点id: extExample-tree-editNodeTree-treeRoot,text:
4、 木叶村,draggable: false /是否可以拖拽);tree.setRootNode(root);/设置树的根节点root.expand(true, false);/给tree创建一个可修改的容器，即TreeEditorvar treeEditer = new Ext.tree.TreeEditor(tree,/将tree组建的实例放入allowBlank: false/输入的值不可以为空);/*为创建的treeEditer添加事件 有两个事件最为常用，一个为beforestartedit另一个为complete 从名字就可以看出，beforestartedit事件是在编辑前的事件，
5、因此可以通过它来判断那些节点可以编辑那些不可以。 complete为编辑之后的事件，在这里面可以添加很多事件，比如添加一个Ext.Ajax向后台传送修改的值等等。 */treeEditer.on(beforestartedit, function(treeEditer)var tempNode = treeEditer.editNode;/将要编辑的节点if (tempNode.isLeaf() return true;else return false;);/*complete事件带有三个参数分别为 1.Editor this 当前编辑组建即TreeEditor 2.Mixed value
6、编辑之后的值 3.Mixed startValue 编辑之前的值 */treeEditer.on(complete, function(treeEditer, newValue, oldValue)var nodeEdited = treeEditer.editNode;/得到编辑之后节点if (newValue = oldValue) return false;else /开始向后台传输数据并有tree_editTree.asp进行处理Ext.Ajax.request(url: ./ServerFile/tree_editTree.asp,method: post,params: empNa
7、me: newValue,empOldName: oldValue,success: function(response, option)var result = response.responseText;alert(result);,failure: function(response, option)nodeEdited.setText(oldValue);/如果失败则将改过的节点恢复原状alert(异步通讯失败，请与管理员联系！);););/创建窗体并显示var win = new Ext.Window(width: 210,height: 230,minWidth: 200,minHeight: 200,plain: true,title: Ext.fly(page-title).dom.innerHTML,layout: fit,border: false,closable: false,items: tree);win.show(););5、HMTL源代码第 3 页 / 共 3 页