ext tree

TreePanel
TreePanel基本使用

树控件由Ext.tree.TreePanel类定义，控件的名称为treepanel，
TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单，我们先来看下面的代码

Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
         id:"root",
text:"树的根"});
root.appendChild(new Ext.tree.TreeNode({
         id:"c1",
text:"子节点"
}));
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
         root:root,
width:100 });
});

　　代码的第一句使用new Ext.tree.TreeNode类来创建一个树节点，第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点，最后直接使用new Ext.tree.TreePanel来创建一个树面板，要树面板的初始化参数中指定树的root属性值为前面创建的root节点，也就是树根节点。



　　 树的节点信息。ExtJS的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。我们来看下面的代码：

var root=new Ext.tree.AsyncTreeNode({
         id:"root",
         text:"树的根"
});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
loader: new Ext.tree.TreeLoader({
                      url:"treedata.js"}),
                      width:100
});

treedata.js这个url返回的内容如下：

[{        id: 1,        text: '子节点1',        leaf: true    },{        id: 2,        text: '儿子节点2',        children: [{            id: 3,            text: '孙子节点',            leaf: true        }]    }]
执行上面的程序，可得到一棵异步加载子节点的树，点击“根节点”会到服务器端加载子节点，
　　 当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只只包含子节点，而不用把孙子节点也返回即可。比如把上面treedata.js中的内容改为下面的内容：

[{        id: 1,      
          text: '子节点',
         leaf: false     }]　　也就是节点树中只包含一个子节点，而该子节点通过指定leaf值为false (默认情况该值为false)，表示该节点不是一个叶子节点，其下面还有指节点。再执行前面的程序，
　　当然这是一个无限循环的树，在实际应用中我们服务器端返回的数据是程序动态产生的，因此不可能每一次都产生leaf为false的节点，如果是叶子节点的时候，则需要把返回的JOSN对象中的leaf设置为true。如下所示：

[{        id: 1,        text: '子节点',        leaf:true    }]　　事件处理

　　当然，仅仅能显示一棵树还不够，我们一般还需要在用户点击树节点的时候执行相应的东西，比如打开某一个连接，执行某一个函数等，这就需要使用到事件处理。比如下面的代码：

Ext.onReady(function(){
      var root=new Ext.tree.TreeNode({
           id:"root",
                  text:"树的根"
});
     var c1=new Ext.tree.TreeNode({
id:"c1",
text:"子节点"
});
root.appendChild(c1);
var tree=new Ext.tree.TreePanel({ renderTo:"hello",
root:root,
width:100
});
tree.on("click",function(node,event){
alert("您点击了"+node.text); }
);
c1.on("click",function(node,event){
alert("您点击了"+node.text); }
);
});　
　 执行上面的程序，当用户点击树控件中的任意节点时，都会弹出一个提示信息框，当用户点击c1这个子节点时，会弹出两次提示信息框。因为我们除了指定tree的click事件响应函数以外，另外又给node节点指定单独的事件响应函数。
　　
　　当然，如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单。看下面的代码：

Ext.onReady(function(){
      var root=new Ext.tree.TreeNode({
            id:"root",
   href:"http://www.easyjf.com",
            hrefTarget:"_blank",
   text:"树的根"
       });
      var c1=new Ext.tree.TreeNode({
id:"c1", href:"http://wlr.easyjf.com", hrefTarget:"_blank",
         text:"子节点"
});
       root.appendChild(c1);
       var tree=new Ext.tree.TreePanel({ renderTo:"hello",
root:root,
width:100 });
        });

　执行程序，点击树节点，将会在浏览新窗口中打开节点中href指定的链接。

ExtJS中，不管是叶子节点还是非叶子节点，都统一用TreeNode表表示树的节点。在 ExtJS中，有两种类型的树节点。一种节点是普通的简单树节点，由Ext.tree.TreeNode定义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode定义。
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
       renderTo:"hello",
       root:new Ext.tree.AsyncTreeNode({ text:"根节点"
            }),
        width:100
    });
});
对于普通的TreeNode来说，可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。

　　TreeNode与AsyncTreeNode可以同时使用，比如下面的代码：

Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"树的根"
});
var c1=new Ext.tree.TreeNode({
text:"子节点1" 
})
var c2=new Ext.tree.AsyncTreeNode({
text:"子节点2"
});
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({ renderTo:"hello",
root:root,
width:300,
loader:new Ext.tree.TreeLoader({     applyLoader:false,
url:"treedata.js"
})
});
});
treedata.js中的内容仍然是：
[{        id: 1,        text: '子节点'     }]

另外要在树以外的程序中得到当前选择的节点，可以通过TreePanel的getSelectionModel方法来获得，该方法默认返回的是Ext.tree.DefaultSelectionModel对象，DefaultSelectionModel的getSelectedNode方法返回当前选择的树节点。
比如要得到树tree中中当前选择节点，代码如下：

tree.getSelectionModel().getSelectedNode()