您的位置：首页 > Web前端 > JavaScript

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

2008-03-19 19:31 609 查看
一 开发环境
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);


}


}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航