ExtJS——TreePanel

木然绽放

于 2017-03-23 14:37:20 发布

阅读量404

点赞数

分类专栏： ExtJS4

本文链接：https://blog.csdn.net/u013127751/article/details/65443501

版权

ExtJS4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    //树的节点数据源
    var node = {
        text:'根',
        expanded:true,
        leaf:false,//是否为叶节点
        children:[
         { text: '根下节点一[user图标]', leaf: true, iconCls: 'nodeicon' },
         { text: '根下节点二', leaf: true },
         { text: '根下节点三', leaf: false,expanded:true,children:[
                 { text: '节点三子节点一', leaf: true },
                 { text: '节点三子节点二', leaf: false, expanded: true, children: [
                            { text: '节点三子节点二节点一', leaf: true },
                            { text: '节点三子节点二节点二', leaf: true }
                        ]
                 }
         ]}
        ]
    };
    //树面板
    var treelocal = new Ext.tree.TreePanel({
        title:'TreePanelLocal',
        //rootVisible: false,有时候我们不想显示根节点，可以通过rootVisible设置他的可见性。在本例中我没有隐藏根。
        root:node,
        height:200
    });
    //树面板
    var treeservice = new Ext.tree.TreePanel({
        title:'TreePanelService',
        root:{text:'根',expanded:true},
        loader: {
            type:'ajax',
            url: 'php/tree.php',
            renderer: 'data',//加载的数据类型html data　component
            autoLoad:true,//访问php的关键
            success:function(form,action){
                    var result = Ext.JSON.decode(action.responseText);
                    treeservice.root.children=result.data;
                    treeservice.setRootNode(treeservice.root);//刷新root关键的一步
                    treeservice.setHeight(200);
                 }                                     
                }
    });
    //表单
    var form = new Ext.form.FormPanel({
        frame:true,
        title:'表单标题',
        style:'margin:10px',
        items:[treelocal,treeservice],
        buttons:[{
            text:'获取选中项',
            handler:function(){
                var selectNode = treelocal.getSelectionModel().getSelection();
                Ext.MessageBox.alert('提示','TreePanelLocal：' + (selectNode == null ? treelocal.root.text : selectNode[0].data.text));
            }
        }]
    });
    //窗口
    var win = new Ext.Window({
        title:'窗口',
        width:476,
        height:574,
        resizable:true,
        modal:true,
        closable:true,
        minimizable:true,
        maximizable:true,
        items:form
    });
    win.show();
});
</script>
</body>
</html>

tree.php

<?php
$node1=array('text'=>'服务器/根下节点一[user图标]','leaf'=>true,'iconCls'=>'nodeicon');
$node2=array('text'=>'服务器/根下节点二[user图标]','leaf'=>true);
$node3=array('text'=>'服务器/根下节点三[user图标]','leaf'=>false,'children'=>array(
	array('text'=>'服务器/节点三子节点一','leaf'=>true),
	array('text'=>'服务器/节点三子节点二','leaf'=>false,'expanded'=>true,'children'=>
            array(array('text'=>'服务器/节点三子节点二节点一','leaf'=>true),
            	  array('text'=>'服务器/节点三子节点二节点二','leaf'=>true))
		 )
	));
echo json_encode(array('data'=>array($node1,$node2,$node3),'success'=>true));
?>

木然绽放

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS——TreePanel

index.html Ext.onReady(function(){ //树的节点数据源 var node = { text:'根', expanded:true, leaf:false,//是否为叶节点 children:[ { text:
复制链接

扫一扫