带右键菜单的树

vifir新技术学院　|　JAVA开源学院　|　LINUX开源学院　|　。NET开源学院　| 　Ruby学院

当前位置>>首页－学院－vifir新技术学院－ExtJs－ext实战

来源：extshow　作者：　辉老大　2008-06-17 15:02:15.0网友评论：0条　点击：1156

　　ext支持从服务器动态加载树形菜单，这里要说明下，ext所识别的回调函数返回的数据类型都必须是json格式的，不明白什么是json的朋友请自行 google。这里我们需要将php的数组转换成json格式，，php5.2.5以上已经自带此功能，为了更好的兼容不同版本的php，建议使用 pear的json类来转换

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>

运行代码，我们将得到如下效果：