轉自：http://web.qhwins.com/CSS-JS-XML/2011091312092944999107.html

config定義{  animate : Boolean,  containerScroll : Boolean,  ddAppendOnly : String, /*很顯然這是api的一個錯誤,treepanel.js中惟一用到它的地方是this.dropZone = new            Ext.tree.TreeDropZone(this, this.dropConfig || {                 ddGroup: this.ddGroup || "TreeDD", appendOnly: this.ddAppendOnly === true             })      只有沒有定義dropConfig才會影響ddconfig的appendOnly,原api說明是      True if the tree should only allow append drops 只有當值為真時才允許以追加的方式接受拖曳*/  ddGroup : String,     ddScroll : Boolean,  dragConfig : Object,  dropConfig : Object,  enableDD : Boolean,  enableDrag : Boolean,  enableDrop : Boolean,    //以上引數更應該放在Ext.dd中學習  hlColor : String,    //高亮顏色     hlDrop : Boolean    //曳入時高亮顯示?  lines : Boolean    //顯示樹形控制元件的前導線  loader : Ext.tree.TreeLoader    //這是個重要的引數,用於方便的構建樹形選單,用於遠端呼叫樹狀資料  pathSeparator : String    //默徑分隔符.預設為/  rootVisible : Boolean //根可見?這是個有趣的屬性,因為樹只能有且僅有一個根,當我們需要兩個或更多的"根"時就要用它了  selModel : Boolean    /*選擇模式,預設的是一個Ext.tree.DefaultSelectionModel例項,也可以是 Ext.tree.MultiSelectionModel,如果你有興趣,還可以自己定義,當然,它絕對不是一個布林值  另,雖然內建的兩種選擇方式都支援getSelectedNodes和clearSelections() 方法,但treenode中好象只用到的select/unSelecte/isSelected,如果自己繼承寫SelectionModel應該至少 支援這三個方法  */  singleExpand : Boolean    //在所有的兄弟節點中只能有一個被展開  屬性  dragZone : Ext.tree.TreeDragZone  dropZone : Ext.tree.TreeDropZone  root : Node    //最重要的也就是這個屬性了  方法  TreePanel( Object config )  構造  collapseAll() : void  expandAll() : void  收起展開所有節點  expandPath( String path, [String attr], [Function callback] ) : void  由path找到節點,展開樹到此節點  getChecked( [String attribute], [TreeNode startNode] ) : Array  返回一個包含所有選中節點的陣列.或者所有選中節點的屬性attribute組成的陣列  getEl() : Element  返回當前TreePanel的容器物件  getLoader() : Ext.tree.TreeLoader  當前所使用的TreeLoader物件  getNodeById( String id ) : Node  由指定的節點id找到節點物件  getRootNode() : Node  得到根節點,同屬性root  getSelectionModel() : TreeSelectionModel  得到選擇模式  getTreeEl() : Ext.Element  返回當前tree下面的元素  selectPath( String path, [String attr], [Function callback] ) : void  由path選擇指定的節點,它事實上呼叫的是expandPath用於展開節點物件  setRootNode( Node node ) : Node  設定根節點  事件  append : ( Tree tree, Node parent, Node node, Number index )  beforeappend : ( Tree tree, Node parent, Node node )  beforechildrenrendered : ( Node node )  beforeclick : ( Node node, Ext.EventObject e )  beforecollapsenode : ( Node node, Boolean deep, Boolean anim )  beforeexpandnode : ( Node node, Boolean deep, Boolean anim )  beforeinsert : ( Tree tree, Node parent, Node node, Node refNode )  beforeload : ( Node node )  beforemove : ( Tree tree, Node node, Node oldParent, Node newParent, Number index )  beforenodedrop : ( Object dropEvent )  beforeremove : ( Tree tree, Node parent, Node node )  checkchange : ( Node this, Boolean checked )  click : ( Node node, Ext.EventObject e )  collapsenode : ( Node node )  contextmenu : ( Node node, Ext.EventObject e )  dblclick : ( Node node, Ext.EventObject e )  disabledchange : ( Node node, Boolean disabled )  dragdrop : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, DD dd, event e )  enddrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )  expandnode : ( Node node )  insert : ( Tree tree, Node parent, Node node, Node refNode )]  load : ( Node node )  move : ( Tree tree, Node node, Node oldParent, Node newParent, Number  nodedragover : ( Object dragOverEvent )  nodedrop : ( Object dropEvent )  remove : ( Tree tree, Node parent, Node node )  startdrag : ( Ext.tree.TreePanel this, Ext.tree.TreeNode node, event e )  textchange : ( Node node, String text, String oldText )  Ext.tree.TreeNode  樹狀控制元件的節點類,繼承自Ext.data.Node  config{      allowChildren : Boolean      allowDrag : Boolean      allowDrop : Boolean      checked : Boolean        //無論設為真還是假都會在前面有個選擇框,預設未設定      cls : String      disabled : Boolean      draggable : Boolean      expandable : Boolean      expanded : Boolean             href : String            //超連結      hrefTarget : String      icon : String            //圖示      iconCls : String             isTarget : Boolean        //是拖曳的目標?      qtip : String            //提示      qtipCfg : String        //      singleClickExpand : Boolean    //單擊展開      text : String        //文字內容      uiProvider : Function    //預設Ext.tree.TreeNodeUI,如果想自己提供ui可以自已再繼承Ext.tree.TreeNodeUI  }  屬性  disabled : Boolean     text : String  ui : TreeNodeUI    //此屬性只讀.參見uiProvider  方法  TreeNode( Object/String attributes )  構造  collapse( [Boolean deep], [Boolean anim] ) : void  收起本節點  collapseChildNodes( [Boolean deep] ) : void  收起子節點  disable() : void  enable() : void  禁止允許  ensureVisible() : void  確保所有的父節點都是展開的  expand( [Boolean deep], [Boolean anim], [Function callback] ) : void  展開到當前節點  expand( [Boolean deep], [Boolean anim], [Function callback] ) : void  展開本節點  expandChildNodes( [Boolean deep] ) : void  展開所有的子節點  getUI() : TreeNodeUI  返回ui屬性  isExpanded() : Boolean  當前節點是否展開  isSelected() : Boolean  當前節點是否選擇  select() : void  選擇當前節點  setText( String text ) : void  設定當前節點的文字  toggle() : void  在展開或收起狀態間切換  unselect() : void  取消選擇  事件  beforechildrenrendered : ( Node this )  beforeclick : ( Node this, Ext.EventObject e )  beforecollapse : ( Node this, Boolean deep, Boolean anim )  beforeexpand : ( Node this, Boolean deep, Boolean anim )  checkchange : ( Node this, Boolean checked )  click : ( Node this, Ext.EventObject e )  collapse : ( Node this )  contextmenu : ( Node this, Ext.EventObject e )  dblclick : ( Node this, Ext.EventObject e )  disabledchange : ( Node this, Boolean disabled )  expand : ( Node this )  textchange : ( Node this, String text, String oldText )  Ext.tree.AsyncTreeNode  繼承自Ext.tree.TreeNode,支援非同步建立,很顯然除了多個loader與TreeNode沒什麼區別  config{  loader : TreeLoader     }  屬性  loader : TreeLoader  方法  AsyncTreeNode( Object/String attributes )  isLoaded() : Boolean  isLoading() : Boolean  reload( Function callback ) : void  事件  beforeload : ( Node this )  load : ( Node this )  Ext.tree.TreeNodeUI  為節點輸出而設計,如果想建立自己的ui,應該繼承此類  方法  addClass( String/Array className ) : void  增加樣式類  getAnchor() : HtmlElement  返回<a>元素  getIconEl() : HtmlElement  返回<img>元素  getTextEl() : HtmlNode  返回文字節點  hide() : void  隱藏  isChecked() : Boolean  選中?  removeClass( String/Array className ) : void  移除樣式  show() : void[/b][b]

  顯示  toggleCheck( Boolean (optional) ) : void  切換選中狀態  Ext.tree.RootTreeNodeUI  api上說它繼承自object,事實上treenodeui它中繼承自Ext.tree.TreeNodeUI,也只有這樣才合理,用於輸出根節點  Ext.tree.TreeLoader  用於遠端讀取樹狀資料來構造TreeNode的子節點  config{      baseAttrs : Object    //構造子節點的基礎屬性      baseParams : Object    //請求url的傳入引數      clearOnLoad : Boolean    //重新載入前先清空子節點      dataUrl : String        //遠端請求時的url      preloadChildren : Boolean    //節點第一次載入時遞迴的載入所有子孫節點的children屬性      uiProviders : Object    //ui提供者      url : String    //等同於dataUrl  }  方法  TreeLoader( Object config )  構造  createNode() : void  建立節點,treeloader.js中定義的是createNode : function(attr),傳入的應該是一個定製的節點  load( Ext.tree.TreeNode node, Function callback ) : void  為node載入子節點  事件  beforeload : ( Object This, Object node, Object callback )  load : ( Object This, Object node, Object response )  loadexception : ( Object This, Object node, Object response )  Ext.tree.TreeSorter  排序  config{      caseSensitive : Boolean//大小寫敏感,預設為false      dir : String    //正序還是倒序,可選asc/desc.預設asc      folderSort : Boolean //葉節點排在非葉節點之下 ,預設為真      leafAttr : String    //在folderSort中排序時的使用的屬性,預設為leaf      property : String    //用於排序的屬性.預設為text      sortType : Function    //可以通過特定的sortType先轉換再排序  }  方法  TreeSorter( TreePanel tree, Object config )  構造  Ext.tree.TreeFilter  過濾器  clear() : void  清除當前過濾器  filter( String/RegExp value, [String attr], [TreeNode startNode] ) : void  filterBy( Function fn, [Object scope] ) : void  使用過濾器,但正如api中所說的,這是個實驗性的數,還有很多不足,基本上很難真的作用  慣例來個小示例  Ext.onReady(function() {      //建立樹      var tree=new Ext.tree.TreePanel( {          el:Ext.getBody(),          autoScroll:true,          animate:true,          height:200,          enableDD:true,          containerScroll: true      });          //建立根       var root = new Ext.tree.TreeNode( {          text: 'Ext JS',          draggable:false,          id:'root'      });      //設定根      tree.setRootNode(root);      tree.render();          //增加子節點      root.appendChild(new Ext.tree.TreeNode( {          text: 'csdn',          href:'http://www.csdn.net',          id:'node_csdn'      }));          root.appendChild(new Ext.tree.TreeNode( {          text: 'duduw',          href:'http://www.duduw.com',          id:'duduw_Node'      }));          //設定屬性      tree.root.attributes.description='這是根節點';      //getNodeById      tree.getNodeById('duduw_Node').attributes.description='這是葉節點';      //選擇第一個子節點      tree.selectPath('/root/node_csdn');      //事件      tree.on('click',function(node,e) {          e.stopEvent();          if(node.attributes.description) {              Ext.MessageBox.show( {title:'您選擇了',                  msg:String.format("description:{0}<br/>href:{1}",node.attributes.description,node.attributes.href)              });          }      });      });