`

EXT 树

    博客分类：
  • EXT
EXTHTML
阅读更多
<html>
<script src="ext20/adapter/ext/ext-base.js" charset="utf-8"></script>
<script src="ext20/ext-all.js" charset="utf-8"></script>
<link href="ext20/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<link href="ext20/resources/css/xtheme-sa.css" rel="stylesheet" type="text/css">
<title>ext test</title>
<script>
Ext.onReady(function(){
var Tree = Ext.tree;
            var tree = new Tree.TreePanel({
                el:'tree',
                animate:true,
                autoScroll:true,
                loader: new Tree.TreeLoader({dataUrl:'treejosn.html'}),
                enableDD:true,
                containerScroll: true,
                singleExpand:true,
                dropConfig: {appendOnly:true},
        listeners : { 
               //单击树节点，刷新右边的视图
               'click':function(node,e){
//alert(node.id)
            }
            }               
            });        
            // add a tree sorter in folder mode
            new Tree.TreeSorter(tree, {folderSort:true});           
            // set the root node
            var root = new Tree.AsyncTreeNode({
                text: 'Ext JS',
                draggable:false, // disable root node dragging
                id:'source'
            });
            tree.setRootNode(root);           
            // render the tree
            tree.render();           
            root.expand(false, /*no anim*/ false);
           
});

</script>
<body>
<div id="father" style="overflow:auto; height:500px;width:600px;border:1px solid #c3daf9;">
<div id="tree" style="float:left; height:500px;width:40%;border:1px solid #c3daf9;"></div>
<div id="picframe" style="height:500px;border:1px solid #c3daf9; float:left;">
<div id="picdir" style="height:100px;border:1px; background-color:#c3daf9"></div>
<div id="picad" style="height:300px;border:1px; background-color:#39F"></div>
</div>
</div>

</body>
</html>

//=================================================//
treejosn.html:

[{"id":"10","parentId":"-1","text":"12","leaf":false,"children":[
{"id":"33","parentId":"10","text":"computert","leaf":true,"children":[]},
{"id":"34","parentId":"10","text":"computer3","leaf":true,"children":[]}]},
{"id":"7401","parentId":"-1","text":"computer","leaf":false,"children":[]},
{"id":"27","parentId":"-1","text":"database","leaf":false,"children":[]},
{"id":"7201","parentId":"-1","text":"fm","leaf":false,"children":[]},
{"id":"30","parentId":"-1","text":"monitor","leaf":false,"children":[]},
{"id":"44","parentId":"-1","text":"other","leaf":false,"children":[]},
{"id":"1","parentId":"-1","text":"report","leaf":false,"children":[]},
{"id":"201","parentId":"-1","text":"topology","leaf":false,"children":[]}]
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics