根据小道消息，公司要在原来产品基础上，引用AJAX框架 EXT，所以最近闲来没事的时候，小小研究了一下，特此拿来与大家分享，不多废话，看代码asd
reorder.js 文件的代码：
/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
//关于TreeLoader的原始API定义，来自EXT DOC
// Ext.tree.TreeLoader = function(config){
// this.baseParams = {};
// this.requestMethod = "POST";
// Ext.apply(this, config);
//
// this.addEvents({
// "beforeload" : true,
// "load" : true,
// "loadexception" : true
// });
// };
//定义一个Loader，设置他的后台php页面为get-nodes.php
var myTreeLoader = new Tree.TreeLoader({dataUrl: 'get-nodes.php'});
//为Loader添加一个事件，目的是用于树与后台交互的时候传递我想要的参数
myTreeLoader.on("beforeload", function(treeLoader, node) {
//这里我传递了两个参数，一个是该节点的ID，一个是该节点显示的文本
treeLoader.baseParams.node_id = node.id;
treeLoader.baseParams.node_text = node.text;
//appParams.pzuserdm=node.attributes.text;
});
//这里实例化咱具体想要的那种类型的tree，EXT提供很多种不同的tree
//咱刚开始学，搞个简单的玩玩先
var tree = new Tree.TreePanel('tree-div', {
//下面是对咱的TreePanel属性的一些设置
//俺的英文也不怎么好，所以还是不出来献丑了，直接把DOC的内容COPY过来好了
//animate
//animate : Boolean
//true to enable animated expand/collapse
//This config option is defined by TreePanel.
animate:true,
//containerScroll
//containerScroll : Boolean
//true to register this container with ScrollManager
//This config option is defined by TreePanel.
loader:myTreeLoader,
//enableDD
//enableDD : Boolean
//true to enable drag and drop
//This config option is defined by TreePanel.
enableDD:true,
//loader
//loader : Boolean
//A TreeLoader for use with this TreePanel
//This config option is defined by TreePanel.
containerScroll: true
});
//给树定义一个单击事件，其实本例中没什么用，俺这么写是为了调试方便，呵呵~~
tree.on('click', function(node, event) {
//alert(this.loader.dataUrl);
//alert(node.text);
});
//定义树的根节点
var root = new Tree.AsyncTreeNode({
text: '公司总部图',
draggable:false,
id:'-100'
});
tree.setRootNode(root);
// render the tree
tree.render();
root.expand();
});
reorder.html 代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>
</script>
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
</body>
</html>
get-nodes.php 代码 就不写这里了。。。单开一篇写，彻底拜服于 FCK~~~
发表于 @ 2008年06月25日 11:04:00|评论(loading...)|编辑|收藏