ExtJs与WCF交互生成树.docVIP

上文做了下Ajax与WCF进行json交互的简单介绍,本文阐述一个具体的实际应用:ExtJs与WCF交互,生成树.也很简单.先看看最终的效果吧: 第一步: 创建一个.net framework 3.5的网站项目ExtJsTreeWcf 第二步: 在网站项目中创建一个启用了Ajax的WCF服务WcfTreeService.svc，创建好之后，对该服务做如下的更改： 1）在WcfTreeService.svc中增加打开WcfTreeService.Svchtml编辑器的方法如下： 添加之后的html为 2）去除web.config中的 第三步：在WcfTreeService.svc修改代码为：?? [DataContract]?public?class?treenode?{?[DataMember]?public?string?id;?[DataMember]?public?string?text;?[DataMember]?public?Listtreenode?children?=?new?Listtreenode();?[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);?Listtreenode?nodes?=?new?Listtreenode();?nodes.Add(t);?nodes.Add(t1);?return?nodes.ToArray();?}??//?在此处添加更多操作并使用?[OperationContract]?标记它们?}?}? 其中treenode是数据契约，而是服务契约，服务操作 第四步：拷贝extjs的脚本资源拷贝到项目中的js目录，然后在default.aspx中添加对extjs脚本的引用： link?rel=stylesheet?type=text/css爃ref=js/ext2.1/resources/css/ext-all.css?Nescript爐ype=text/javascript爏rc=js/ext2.1/adapter/ext/ext-base.js/script??script爐ype=text/javascript爏rc=js/ext2.1/ext-all.js/script?s第五步：在default.aspx增加如下的页面元素：?h2ExtJs与WCF交互-树/h2?div爄d=tree-div?h2/div? 在head/head中添加如下脚本： script?type=text/javascript?=Ext.onReady(function()?{?tvar燭ree?燛xt.tree;?on()var爐ree?爊ew燭ree.TreePanel(?pt{?rrootVisible:爁alse,?ePe