ExtJs异步树,异步树方式获取数据！

ExtJs异步树,异步方式获取数据

1.下载Newtonsoft.Json.Net20.dll(.net 2.0版)后,放入Asp.net项目Bin文件夹中.
   Newtonsoft.Json.Net20,是一个Object/Json转换工具,这里用来把对象转换成Json格式字符串.
2.树节点Model对象,
  public class TreeModel{
        private string _id,_parentid, _text;
        private bool _leaf;
        private List<TreeModel> _children = new List<TreeModel>();//子节点集合
      
        public string id{
            get { return _id; }
            set { _id = value;}
        }
        public string parentid{
            get { return _parentid; }
            set { _parentid = value; }
        }
        public string text{
            get { return _text; }
            set { _text = value; }
        }
        public bool leaf{
            get { return _leaf; }
            set { _leaf = value; }
        }
        public List<TreeModel> children{
            get { return _children; }
            set { _children = value; }
        }
        //添加下级节点
        public void addChild(TreeModel m)
        {
            _children.Add(m);
        }
3.生成json字符串
      public string GetNavTree(){
         List<TreeModel> result = new List<TreeModel>();
         List<TreeModel> list = dao.getNavTree();
         //.....若干代码
         return JsonConvert.SerializeObject(result);// Newtonsoft.Json.Net20里面的东东
    }
  字符串格式如:
    [{"id":"2","parentid":"1","text":"节点一","leaf":false,
           "children":[{"id":"11","parentid":"2","text":"节点一儿子一","leaf":true,"children":[]},
                             {"id":"12","parentid":"2","text":"节点一儿子二","leaf":true, children":[]}]
     },
     {"id":"3","parentid":"1","text":"节点二","leaf":false,
           "children":[{"id":"17","parentid":"3","text":"节点二儿子一","leaf":true,"children":[]}]
     }]
4.页面js

<script type="text/javascript">
   Ext.onReady(function(){
       //根节点
       var root=new Ext.tree.AsyncTreeNode({
               id:"root",
               text:"我是祖宗"});
       //树
       var tree=new Ext.tree.TreePanel({
              renderTo:"show",
              root:root,
              loader: new Ext.tree.TreeLoader({url:"data.aspx"}),//生成Json格式字符串url
              rootVisible:false
        })
        tree.expandAll();//展开
  })
 </script>
 <div id="show"></div>
ExtJs同步树
1.获取Json字符串,比如从数据库中获取,可参考上例所示.
2.生成树
   <script type="text/javascript">
      var buildTree=  function(root,data){
      var child = null;
      for(var i =0;i<data.length;i++){
              child = new Ext.tree.TreeNode(data[i]);
              root.appendChild(child);
              if(data[i].children.length>0)
                     buildTree(child,data[i].children);
              }       
       }
       var root=new Ext.tree.TreeNode({id:"root",
                          text:"I am root"});
       buildTree(root,jsontreedata);//jsontreedata是生成同步树所需Json格式数据,如上例所示
       var tree = new Ext.tree.TreePanel({
           autoScroll:true,
           root:root,
           renderTo:"show",
           containerScroll:true,
           rootVisible:false,
           width:200,
           listeners:{
               "click":function(node,event){
                        if (node.isLeaf()) {  //叶子节点点击不进入链接
                             //触发事件

                  } else {
                        event.stopEvent();  //不是叶子节点不触发事件
                        node.toggle();  //点击时展开
                  }    
           }
      } 
  });
<div id="show"></div>

ps.
   Ext.apply方法,用来复制 源对象 的所有属性 到 目标对象。 
   比如在上例中的TreeNode类构造函数中传入Json对象时,Json对象的所有属性将会 复制到 TreeNode类实例中
/**
 * Copies all the properties of config to obj.
 * @param {Object} obj The receiver of the properties
 * @param {Object} config The source of the properties
 * @param {Object} defaults A different object that will also be applied for default values
 * @return {Object} returns obj
 * @member Ext apply
 */
Ext.apply = function(o, c, defaults){
    // no "this" reference for friendly out of scope calls
    if(defaults){
        Ext.apply(o, defaults);
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
};