ext js tree应用

 

     在做项目的时候，有用到ext tree 的有关知识。现在将代码贴出来，以备以后经常翻阅。

    js代码

   

 var treeloader=[
   {id:'2',text:'郑州',leaf:true},
   {id:'3',text:'新乡',leaf:true},
   {id:'4',text:'南阳',leaf:true},
   {id:'5',text:'安阳',leaf:true},
   {id:'6',text:'信阳',leaf:true},
   {id:'7',text:'商丘',leaf:true}
  ];
 var root=new Ext.tree.AsyncTreeNode({
   id: '1',
   text: "全省",
   children :treeloader
  }); 
 var tree = new Ext.tree.TreePanel({
  renderTo:'tree',//id html
  width:350,
  height:250,
  border : false,
  animate : true,
        lines : true,
  root: root
 });
 root.expand();//树自动显示 展开
 
 var treepanel = new Ext.Panel({
 useArrows: true,
    autoScroll: true,
    animate: true,
    containerScroll: true,
 
    width : 400,
          height : 350,
          border : false,
          items : [{
             contentEl : "treeBox",
             border : false
            }]

 });
 
 
 var treeWin = new Ext.Window({
      frame : true,
      width : 400,
      height : 350,
      title : "地市选择",
      shadow : true,
      modal : true,
      closeAction : "hide",
      items : [treepanel]
     
 });

  $('#city1,#city2').click(function(e, t){
   treeWin.show();
   tree.on("click",function(node){
    city=node.text;
   });
  });
  
 $('#treeCommit').click(function(){
  treeWin.hide();
//  tree.collapseAll();
  Ext.fly("city1").update(city);
  Ext.fly("city2").update(city);
 });

   

jsp代码：

 <div id="treeBox" class="x-hide-display">
     <div id="tree" style="float: left;margin-left:25px;"></div>
     <div>
      <button id="treeCommit" type="submit" style="float: left;margin-left:50px;">
      确定</button>
     </div>
     <div style="clear: both"></div>