treepanel

 
 

  
  <%
  
  @ page language
  
  =
  
  "
  
  java
  
  "
  
   import
  
  =
  
  "
  
  java.util.*
  
  "
  
   pageEncoding
  
  =
  
  "
  
  UTF-8
  
  "
  
  %>
  
  

  
  <%
  
  

  
  String
  
   path 
  
  =
  
   request.getContextPath();

  
  String
  
   basePath 
  
  =
  
   request.getScheme()
  
  +
  
  "
  
  ://
  
  "
  
  +
  
  request.getServerName()
  
  +
  
  "
  
  :
  
  "
  
  +
  
  request.getServerPort()
  
  +
  
  path
  
  +
  
  "
  
  /
  
  "
  
  ;

  
  %>
  
  


  
  <!
  
  DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  
  >
  
  

  
  <
  
  html
  
  >
  
  
  
  
  <
  
  head
  
  >
  
  
    
  
  <
  
  base 
  
  href
  
  ="<%=basePath%>"
  
  >
  
  
    
    
  
  <
  
  title
  
  >
  
  Ext入门
  
  </
  
  title
  
  >
  
  
    
  
  <
  
  meta 
  
  http-equiv
  
  ="pragma"
  
   content
  
  ="no-cache"
  
  >
  
  
    
  
  <
  
  meta 
  
  http-equiv
  
  ="cache-control"
  
   content
  
  ="no-cache"
  
  >
  
  
    
  
  <
  
  meta 
  
  http-equiv
  
  ="expires"
  
   content
  
  ="0"
  
  >
  
      
    
  
  <
  
  meta 
  
  http-equiv
  
  ="keywords"
  
   content
  
  ="keyword1,keyword2,keyword3"
  
  >
  
  
    
  
  <
  
  meta 
  
  http-equiv
  
  ="description"
  
   content
  
  ="This is my page"
  
  >
  
  
        
  
  <!--
  
   引入ExtJS样式文件 
  
  -->
  
  
        
  
  <
  
  link 
  
  rel
  
  ="stylesheet"
  
   type
  
  ="text/css"
  
   href
  
  ="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"
  
  />
  
  
        
  
  <!--
  
   引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) 
  
  -->
  
  
        
  
  <
  
  script 
  
  type
  
  ="text/javascript"
  
   src
  
  ="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"
  
  ></
  
  script
  
  >
  
  
        
  
  <
  
  script 
  
  type
  
  ="text/javascript"
  
   src
  
  ="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"
  
  ></
  
  script
  
  >
  
  
        
  
  <
  
  script 
  
  type
  
  ="text/javascript"
  
  >
  
  
        
        
  
  //
  
  显示窗口
  
  

  
          
  
  function
  
   showWin(){
           
  
  //
  
  创建一个窗口
  
  

  
             
  
  var
  
   win
  
  =
  
  new
  
   Ext.Window({
              width: 
  
  500
  
  ,
              height: 
  
  400
  
  ,
              title: 
  
  "
  
  第一个窗口
  
  "
  
  ,
              buttons: [
                 {
                    text: 
  
  "
  
  确定
  
  "
  
  
                 },{
                    text: 
  
  "
  
  取消
  
  "
  
  
                 }
              ]
           });
           win.show();
        }
        
        
  
  //
  
  显示树
  
  

  
          
  
  function
  
   showTree(){
           
  
  //
  
  组件初始化过程
  
  

  
             
  
  var
  
   tree
  
  =
  
  new
  
   Ext.tree.TreePanel({
              width: 
  
  200
  
  ,
              height: 
  
  200
  
  ,
              title: 
  
  "
  
  我是一棵树
  
  "
  
  ,
              root: 
  
  new
  
   Ext.tree.AsyncTreeNode({
                 text: 
  
  "
  
  树根
  
  "
  
  ,
                 children: [{
                    text: 
  
  "
  
  叶子1
  
  "
  
  ,
                    children: [{
                       text: 
  
  "
  
  叶子11
  
  "
  
  ,
                       leaf: 
  
  true
  
  
                    }]
                 }, {
                    text: 
  
  "
  
  叶子2
  
  "
  
  ,
                    leaf: 
  
  true
  
  
                 }]
              })
           });
           
           tree.on(
  
  "
  
  render
  
  "
  
  , 
  
  function
  
  (){
              alert(
  
  "
  
  树节点显示了
  
  "
  
  );
           });
              
           
  
  //
  
  组件渲染
  
  

  
             tree.render(Ext.getBody());
        }
        
        
  
  //
  
  通过Ext.onReady来开始调用Ext组件
  
  

  
          Ext.onReady(
  
  function
  
  (){
           
  
  //
  
  showWin();
  
  

  
             showTree();
        });
        
  
  </
  
  script
  
  >
  
  
  
  
  </
  
  head
  
  >
  
  
  
  
  
  <
  
  body
  
  >
  
  
  
  
  
  </
  
  body
  
  >
  
  

  
  </
  
  html
  
  >