《ExtJs学习资料60-异步加载树实例.doc》由会员分享，可在线阅读，更多相关《ExtJs学习资料60-异步加载树实例.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) no-repeat !important 3、效果图=4、JS源代码Ext.onReady(function()Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget=side;Ext.state.
2、Manager.setProvider(new Ext.state.CookieProvider();/创建tree的面板即TreePanelvar tree = new Ext.tree.TreePanel(title: 异步加载树的练习,id: extExample-tree-asynchronousTree,/设置一个idautoScroll: true,/自动出现滚动条enableDD: false,/是否支持拖拽效果,设置为true以启用拖拽放下操作 containerScroll: true,/是否支持滚动条,设置为true向ScrollManager注册此容器collapsibl
3、e: true,/是否收缩面板rootVisible:true, /是否显示跟节点frame:true,/如果为true，panel具有全部阴影(指在panel的整个body区域全部填充背景) loader: new Ext.tree.TreeLoader( dataUrl: ./ServerFile/tree_asynchronousTree.asp?id= ),/异步读取的url/* 这是tree中最常用的一个toolbar，比如在上面添加刷新按钮 */tools: id: refresh,/根据id的不同会出现不同的按钮handler: function()var tree = Ext.
4、getCmp(extExample-tree-asynchronousTree);tree.loader.dataUrl = ./ServerFile/tree_asynchronousTree.asp;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.AsyncTre
5、eNode(id: extExample-tree-asynchronousTree-treeRoot,text: 木叶村,draggable: false /是否可以拖拽);/设置树的根节点tree.setRootNode(root);/* 让根节点展开这个函数有三个参数分别为 1.Boolean deep如果设置为true则将全部节点全部展开 2.Boolean anim如果设置为true则在展开时伴随的动画效果 3.Function callback 一个回调函数，当全部展开之后调用的 */root.expand();/给tree的节点添加点击事件tree.on(click, funct
6、ion(node) if (!node.isLeaf() node.expand(); );/在更改beforload事件tree.on(beforeload, function(node)var tree = Ext.getCmp(extExample-tree-asynchronousTree);var treeid = node.id;if (treeid != extExample-tree-asynchronousTree-treeRoot) var url = ./ServerFile/tree_asynchronousTree.asp?id= + treeid;tree.loader.dataUrl = url; /在load之前重新封装dataUrl);/ 创建窗体并显示var win = new Ext.Window(width: 250, height: 260, minWidth: 200, minHeight: 200, plain: true, /baseCls:x-plain, /背景色为透明title: Ext.fly(page-title).dom.innerHTML, layout: fit, border: false, closable: false, items: tree);win.show(););第 2 页 / 共 2 页