一 开发环境
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 >
< 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();
} );
// 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);
}
}
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);
}
}