Ext2.0 + .Net 2.0应用实例（2）--用ExtJS 实现动态载入树

一 开发环境
Windows 2003
VS 2005
Aptana
Ext2.0

二 客户端代码 
HTML:

< html >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=iso-8859-1 " >
< title > Reorder TreePanel </ title >
< link rel = " stylesheet "  type = " text/css "  href = " resources/css/ext-all.css "   />

     <!--  GC  -->
      <!--  LIBS  -->
      < script type = " text/javascript "  src = " adapter/ext/ext-base.js " ></ script >
      <!--  ENDLIBS  -->

     < script type = " text/javascript "  src = " ext-all.js " ></ script >
< script type = " text/javascript "  src = " reorder.js " ></ script >

</ head >
< body >

< div id = " tree-div "  style = " overflow:auto; height:300px;width:250px;border:1px solid #c3daf9; " ></ div >

</ body >
</ html >

 

JS:

Ext.onReady(function() ... {
    // shorthand
    var Tree = Ext.tree;
    
    var tree = new Tree.TreePanel(...{
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true, 
        loader: new Tree.TreeLoader(...{
            dataUrl:'Ajax.aspx'
        })
    });

    // set the root node
    var root = new Tree.AsyncTreeNode(...{
        text: '总公司',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();
} );

三 服务端代码
新建一个Ajax.aspx页面

using  System;
using  System.Data;
using  System.Web;

public   partial   class  Ajax : System.Web.UI.Page
... ... {
    protected void Page_Load(object sender, EventArgs e)
    ......{
        string result = "[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"业务部"}]";     
        Response.Write(result);
    }
}