ExtJs与WCF交互:生成树

上文做了下Ajax与WCF进行json交互的简单介绍,本文阐述一个具体的实际应用:ExtJs与WCF交互,生成树.也很简单.先看看最终的效果吧:

第一步: 创建一个.net framework 3.5的网站项目ExtJsTreeWcf

第二步: 在网站项目中创建一个启用了Ajax的WCF服务WcfTreeService.svc，创建好之后，对该服务做如下的更改：

1）在WcfTreeService.svc中增加Factory="System.ServiceModel.Activation.WebServiceHostFactory",打开WcfTreeService.Svchtml编辑器的方法如下：

添加Factory之后的html为

2）去除web.config中的<enableWebScript/>

第三步：在WcfTreeService.svc修改代码为：

[DataContract] 

public class treenode 

{ 
[DataMember] 
public string id; 
[DataMember] 
public string text; 
[DataMember] 
public List<treenode> children = new List<treenode>(); 
[DataMember] 
public string cls; 
[DataMember] 
public bool leaf; 
} 
[ServiceContract(Namespace = "")] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class WcfTreeService 
{ 
// 添加 [WebGet] 属性以使用 HTTP GET 
[OperationContract] 
[WebInvoke(ResponseFormat=WebMessageFormat.Json)] 
public treenode[] GetTree() 
{ 
// 在此处添加操作实现 
treenode t = new treenode(); 
t.id = "noe1"; 
t.text = "节点1"; 
t.cls = "folder"; 
treenode t0 = new treenode(); 
t0.id = "noe1_0"; 
t0.text = "节点1_0"; 
t0.cls = "folder"; 
t0.leaf = true; 
t.children.Add(t0); 
treenode t1 = new treenode(); 
t1.cls = "folder"; 
t1.id = "000"; 
t1.text = "节点1"; 
treenode t2 = new treenode(); 
t2.id = "noe1_1"; 
t2.text = "节点1_1"; 
t2.cls = "folder"; 
t2.leaf = true; 
t1.children.Add(t2); 
List<treenode> nodes = new List<treenode>(); 
nodes.Add(t); 
nodes.Add(t1); 
return nodes.ToArray(); 

} 


// 在此处添加更多操作并使用 [OperationContract] 标记它们 


} 

}

其中treenode是数据契约，而WcfTreeService是服务契约，服务操作GetTree返回Json编码格式数据

第四步：拷贝extjs的脚本资源拷贝到项目中的js目录，然后在default.aspx中添加对extjs脚本的引用：

<link rel="stylesheet" type="text/css" href="js/ext2.1/resources/css/ext-all.css"> 



<script type="text/javascript" src="js/ext2.1/adapter/ext/ext-base.js"></script> 



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



第五步：在default.aspx增加如下的页面元素： 



<h2>ExtJs与WCF交互-树</h2> 



<div id="tree-div"> 



</div>

在<head></head>中添加如下脚本：

<script type="text/javascript"> 



Ext.onReady(function() { 



var Tree = Ext.tree; 



var tree = new Tree.TreePanel( { 



rootVisible: false, 



el : 'tree-div',//目标div容器 



width: 175, 



height:200, 



autoScroll : true, 



animate : true, 



enableDD : true, 



loader : new Tree.TreeLoader( { 



dataUrl : 'WcfTreeService.svc/GetTree' 



}) 



}); 



var root = new Tree.AsyncTreeNode( { 



text : '根结点', 



draggable : false, 



id : '-100' 



}); 



tree.setRootNode(root); 



tree.render(); 



root.expand(); 



}); 



</script>

浏览页面default.aspx便出现文章开头的页面效果

利用httpwacth察看WcfTreeService.svc/GetTree的输出如下：

[{"children":[{"children":[],"cls":"folder","id":"noe1_0","leaf":true,"text":"节点1_0"}],"cls":"folder","id":"noe1","leaf":false,"text":"节点1"},{"children":[{"children":[],"cls":"folder","id":"noe1_1","leaf":true,"text":"节点1_1"}],"cls":"folder","id":"000","leaf":false,"text":"节点1"}]

程序示例项目： /Files/jillzhang/ExtJsTreeWcf.rar