Ext树形结构

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>tree</title>
        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="Ext/ext-base.js"></script>
        <script type="text/javascript" src="Ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){
                //树控件由Ext.tree.TreePanel类定义,控件名称为TreePanel,TreePanel类继承自Panel面板
                var tree = new Ext.tree.TreePanel({
                    el:'tree'//这里的参数‘tree’表示渲染的DOM的id
                });

                var root = new Ext.tree.TreeNode({text:'我是根'});
                //用setRootNode()方法把root放到tree里
                tree.setRootNode(root);
                //对tree进行渲染
                tree.render();
            });
        </script>
    </head>
    <body>
        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
        <!-- 这里定义渲染的DIV,树将出现在这人DIV里 -->
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>tree</title>
        <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="Ext/ext-base.js"></script>
        <script type="text/javascript" src="Ext/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){

                var tree = new Ext.tree.TreePanel({
                    el:'tree'
                });

                var root = new Ext.tree.TreeNode({text:'我是根'});
                var node1 = new Ext.tree.TreeNode({text:'我是根的第一个枝子'});
                var node2 = new Ext.tree.TreeNode({text:'我是根的第一个枝子的第一个叶子'});
                var node3 = new Ext.tree.TreeNode({text:'我是根的第一个叶子'});
                //使用appendChild()为一人结点添加子结点
                node1.appendChild(node2);
                root.appendChild(node1);
                root.appendChild(node3);

                tree.setRootNode(root);
                tree.render();
                //没有root.expand(true, true);就每次都要点击根或枝前面的加号才能展开整棵树。
                //root.expand(true, true);第一个参数表示是否递归展开所有子结点,如果为false,就只展开第一级子结点,下面的结点仍然是折叠状态。第二个参数表示是否要动画效果,如果为true可以明显看出这些结点是逐渐展开的。
                root.expand(true, true);
            });
        </script>
    </head>
    <body>
        <script type="text/javascript" src="Ext/examples/shared/examples.js"></script>
        <div id="tree" style="height:300px;"></div>
    </body>
</html>

 

posted @ 2013-08-22 10:21 残星 阅读(...) 评论(...) 编辑 收藏