zoukankan      html  css  js  c++  java

  • ExtJS专题（十一）:lTree的Treepanel使用

       最近学习extjs发现了一个问题，extjs是一个JavaScript的框架，属于前端页面上的，所有完全可以和后天的语言分离，大家在extjs的官方例子中可以看到都是html的格式。也就是说和后台结合的话也是按照某种方式传输数据，干什么又加上各种语言的各种框架。简单问题复杂化。 
        现在通过例子说明一下。 
    .net代码 
    1. <%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    3. <html>  
    4. <head>  
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
    6. <title>Virgo_S</title>  
    7. <link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />  
    8. <script type="text/javascript" src="extjs/ext-base.js"></script>  
    9. <script type="text/javascript" src="extjs/ext-all.js"></script>  
    10. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>  
    11. <script type="text/javascript">  
    12. Ext.onReady(function(){   
    13.       //定义树的跟节点   
    14.       var root=new Ext.tree.TreeNode({   
    15.             id:"root",//根节点id   
    16.             text:"我是树根"   
    17.       });   
    18.         
    19.       //定义树节点   
    20.       var c1=new Ext.tree.TreeNode({   
    21.         id:'c1',//子结点id   
    22.         text:'大儿子'   
    23.       });   
    24.       var c2=new Ext.tree.TreeNode({   
    25.         id:'c2',   
    26.         text:'小儿子'   
    27.       });   
    28.       var c22=new Ext.tree.TreeNode({   
    29.         id:'c22',   
    30.         text:'大孙子'   
    31.       });   
    32.   
    33.       root.appendChild(c1);//为根节点增加子结点c1   
    34.       root.appendChild(c2);//为c1增加子节点c2，相信你已经找到规律了吧^_^   
    35.       c1.appendChild(c22);//为c1增加子节点c22   
    36.   
    37.       //生成树形面板   
    38.       var tree=new Ext.tree.TreePanel({   
    39.         renderTo:"tree",   
    40.         root:root,//定位到根节点   
    41.         animate:true,//开启动画效果   
    42.         enableDD:false,//不允许子节点拖动   
    43.         border:false,//没有边框   
    44.         rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性   
    45.      });   
    46.   
    47. });   
    48. </script>  
    49. </head>  
    50. <body>  
    51. <div id="tree" style="height: 500px;  500px;"></div>  
    52. </body>  
    53. </html>  
  • 相关阅读:
    eclipse
    7lession-基础数据使用介绍
    6lession-基本数据类型
    监听复选框
    arttemplate02
    最后判断权重总分
    ajax
    屏幕尺寸发生变化时页面自适应
    js获取url中的中文参数出现乱码
    js 为什么计算结果老是出现NaN
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/1683715.html
Copyright © 2011-2022 走看看