2008-06-16 12:28 | 只看楼主
树型| 收藏| 小 中 大 复制帖子链接到剪贴板1F

ExtJs与WCF交互:生成树
文/jillzhang  出处/博客园

上文做了下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修改代码为：

Code


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

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

Code


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

Code


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

Code


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

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

Code


程序示例项目：
 附件: 您所在的用户组无法下载或查看附件

 感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。
 您可能对 [ExtJS] 的这些文章也感兴趣：

求助：columns tree 获取数据问题，急
ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)
ExtJs2.0学习系列(3)--Ext.Window
ExtJs2.0学习系列(9)--Ext.TabPanel之第一式
ext + mysql 乱码问题
ExtJs2.0学习系列(4)--Ext.FormPanel之第一式
用ExtJs+Linq+Wcf打造简单grid
ExtJs2.0学习系列(5)--Ext.FormPanel之第二式
ExtJS与.NET结合开发实例
ExtJS的.NET控件----YuiGrid(数据绑定、同步/异步取值)