主要介绍如何通过与服务端通信来实现异步加载树形菜单，适用于cms的分类管理等。 ext支持从服务器动态加载树形菜单，这里要说明下，ext所识别的回调函数返回的数据类型都必须是json格式的，不明白什么是json的朋友请自行 google。这里我们需要将php的数组转换成json格式，，php5.2.5以上已经自带此功能，为了更好的兼容不同版本的php，建议使用 pear的json类来转换。相关下载地址为：http://pear.php.net/pepr/pepr-proposal-show.php?id=198，先看下服务端 treedata.php的代码：
- 代码:
<?php
/*
leaf为false表示非叶子节点，为true表示是叶子节点
*/
$trees['root'][] = array('id'=>'1','text'=>'我是子节点1','leaf'=>false);
$trees['1'][] = array('id'=>'2','text'=>'我是孙子节点1','leaf'=>true);
$trees['root'][] = array('id'=>'4','text'=>'我是子节点2','leaf'=>false);
$trees['4'][] = array('id'=>'5','text'=>'我是孙子节点2','leaf'=>true);
require('Json.php');//包含json类
$result = $trees[$_REQUEST['node']];//此处的node为ext传的值，根据该值达到动态加载的效果
$json = new Services_JSON();
echo $json->encode($result);//格式化数组成json格式
?>
接下来看下客户端js的代码：
- 代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
var Tree = Ext.tree;
//声明树定义
var tree = new Tree.TreePanel({
el:'tree-div',//填充到的区域
autoScroll:true,//自动滚动
animate:true,//动画效果
enableDD:true,//允许拖拽节点
border:false,//没有边框
rootVisible:true,//设为false，隐藏根节点
containerScroll: true,
//定义json来源文件url
loader: new Tree.TreeLoader({
dataUrl:'treedata.php'
})
});
//定义根节点
var root = new Tree.AsyncTreeNode({
text: '我是根',
draggable:false,//不允许拖拽
id:'root'
});
tree.setRootNode(root);
//生成树
tree.render();
root.expand();
});
</script>
<div id="tree-div"></div>
</body>
</html>
运行代码，我们将得到如下效果：
通过firebug（firefox的js调试插件，建议在配合ietab来一起进行js调试）的控制台，让我们来看看到底发生了什么，看下面两幅图：
![图片]()
通过node的值在服务端动态生成json数据，这就是从服务端加载树形菜单的基本。点击事件请参照前一章。
浙公网安备 33010602011771号