ExtJS——TreePanel

来源：互联网发布：淘宝购物车结算是灰的编辑：程序博客网时间：2024/06/05 19:34

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