关于EXTJS的tree的应用的几点心得

来源：互联网发布：suse linux配置ip 编辑：程序博客网时间：2024/04/27 21:50

刚接触EXTJS 不久，这里还得感谢DOJO 中国（http://www.dojochina.com/）;我是从这里开始了对EXTJS的关注。因为项目的需要，而且EXTJS的tree确实很漂亮，所以对此做了些研究。当然也是受了DOJO 中国里的EXT 2.0简明教程（第三章歌颂吧，只为了tree也要学习EXTJS）的诱惑。

我使用的环境是VS2005（C#）+EXTJS2.1。

刚开始还挺顺利的，在没有使用AsyncTreeNode前，一些都是好好的。但是，当使用动态加载数据的时候，问题就来了。首先，装在本机IIS的EXTJS例子里的有关tree的都不能工作。开始还以为是因为我没有安装PHP的缘故；一直没有太留意。后来在CSDN 看了这个帖子（http://topic.csdn.net/u/20080910/00/1d29c04a-2edd-47f9-bfc8-92f949d920a9.html）自己一试，才发现原来没这么简单，折腾了好多天，还是一样只能显示根一级。看了半天，也没发现有什么问题，html文件和相关的js文件，都是大同小异的。但为什么结果出不来呢？？？想了半天，只能是出在数据源方面。

本文只讨论通过JSON的数据源建立tree；有关XML的以后再说。问题终于得到了解决，下面等我漫漫说来。

1． 通过对TreePanel增加 “loadexception”的listeners;可以发现错误的来源。

代码：

var tree = new Ext.tree.TreePanel({

el:'div_tree',

xtype: 'treepanel',

loader: new Tree.TreeLoader({

dataUrl: '../webservices/extjs_test.asmx/getnode',

listeners:{

"load":function(loader,node,response){

Debugger;

}}

})

});

2.千万不要试图用静态的文件如*.json;*.txt等。我试没有一次可以的。甚至我拿动态生成的JSON串（肯定正确的）也是只显示根。通过资料把iis 添加 json的MIME类型的方法也不行。不知道有哪位高手可以指教。我是放弃了。

下面我就来说说动态加载的方法：

1． 使用ashx文件；

步骤：新建“一般处理程序”；

代码1.：Tree_dep.ashx

<%@ WebHandler Language="C#" Class="tree_dep" %>

using System;

using System.Web;

using Jayrock;

using Jayrock.Json;

public class tree_dep : IHttpHandler {

//生成JSON串的关键

public void ProcessRequest (HttpContext context) {

using ( JsonTextWriter writer = new JsonTextWriter(context.Response.Output) )

{

writer.WriteStartArray();

//111

writer.WriteStartObject();

writer.WriteMember("text");

writer.WriteString("节点3");

writer.WriteMember("id");

writer.WriteString("1");

writer.WriteMember("checked");

writer.WriteBoolean(false);

//111--111

writer.WriteMember("children");

writer.WriteStartArray();

writer.WriteStartObject();

writer.WriteMember("id");

writer.WriteString("11");

writer.WriteMember("text");

writer.WriteString("子节点1");

writer.WriteMember("checked");

writer.WriteBoolean(false);

//111-111-111

writer.WriteMember("children");

writer.WriteStartArray();

writer.WriteStartObject();

writer.WriteMember("id");

writer.WriteString("111");

writer.WriteMember("text");

writer.WriteString("子节点1");

writer.WriteMember("leaf");

writer.WriteBoolean(true);

writer.WriteMember("checked");

writer.WriteBoolean(true);

writer.WriteEndObject();

writer.WriteEndArray();

writer.WriteEndObject();

writer.WriteEndArray();

writer.WriteEndObject();

//2222

writer.WriteStartObject();

writer.WriteMember("id");

writer.WriteString("2");

writer.WriteMember("text");

writer.WriteString("节点1");

writer.WriteMember("leaf");

writer.WriteBoolean(true);

writer.WriteMember("checked");

writer.WriteBoolean(false);

writer.WriteEndObject();

//333

writer.WriteStartObject();

writer.WriteMember("id");

writer.WriteString("3");

writer.WriteMember("text");

writer.WriteString("节点2");

writer.WriteMember("leaf");

writer.WriteBoolean(true);

writer.WriteMember("checked");

writer.WriteBoolean(false);

writer.WriteEndObject();

writer.WriteEndArray();

}

public bool IsReusable {

get {

return false;

}

} //end tree_dep.ashx

代码2. 对相应的JS文件中的treeloader修改dataUrl为

dataUrl:'tree_dep.ashx'

下面是结果图：

其中的要解释的是，在Tree_dep.ashx文件中引用了两个有关的JSON的dll.

using Jayrock;

using Jayrock.Json;

他们可以在微软的网站下载。

有疑问，我建议大家看看这篇文章JavaScript 和 .NET 中的 JavaScript Object Notation (JSON) 简介

（http://msdn.microsoft.com/zh-cn/library/bb299886.aspx#intro_to_json_topic1）里面也有jayrock的下载。

这里的关键就是用一个JsonTextWriter向context.Response.Output做输出。不过代码也真的写得很难看。哈哈。

1． 动态取数据当然少不了用web services;取数据，我一开始也就是用它，但也是只能显示根。通过上面的实现；我发现了原来是返回的JSON串的格式不一样。会让EXTJS加载树发生异常，所以只能显示根。

正确的JSON 串（为了测试做得很简单的）：

[{"text":"0","leaf":true},{"text":"1","leaf":true}]

这是由web services;返回的结果。

关键：不是直接返回串，而是用Newtonsoft.Json.JsonWriter向context.Response.Output做输出返回的结果。只有这样EXTJS的tree 才能正确加载。

部分代码：

///先定义JSON对象。

partial class JSONObject

{

string Text;

public string text

{

get { return this.Text; }

set { this.Text = value; }

}

bool Leaf;

public bool leaf

{

get { return this.Leaf; }

set { this.Leaf = value; }

}

[WebMethod]

///取动态节点函数

public void getnode ()

{

List<JSONObject> mylists = new List<JSONObject>();

for ( int i = 0; i < 2; i++ )

{

JSONObject myobj = new JSONObject();

myobj.text = i.ToString();

myobj.leaf = true;

mylists.Add(myobj);

}

Newtonsoft.Json.JsonWriter mywriter = new Newtonsoft.Json.JsonWriter(this.Context.Response.Output);

Newtonsoft.Json.JsonSerializer myser = new JsonSerializer();

myser.Serialize(mywriter, mylists);

}

大家看好了。这里的返回是void 。而不是string。用JsonWriter直接串行化。

还有把相应的JS文件的dataUrl改一下：

dataUrl: '../webservices/extjs_test.asmx/getnode'

至于Newtonsoft.Json大家可以在网上很容易找到。一个开源的包。和上面方案1的Jayrock功能一样。只是这个我用得比较顺手。

那这样就奇怪了为什么呢？按道理应该返回JSON串才对的；怎么要这样用web services呢？

这里是我用string返回的WS的结果：

<?xml version="1.0" encoding="utf-8" ?>

仔细看，出来多了xml的头外，其他都一样。但是这样EXTJS 就加裁不成了.不知道有没有高手能解释？难道EXTJS要的是这么纯的JSON串？那只能用我上面的方法解决了。

好不容易。终于把这tree给显示出来

有点简单。

终于可以歇口气了。当然root节点要用AsyncTreeNode了。不过，看起来还是不太完整的动态加载。以后完善，总算看到树了。还有很多人用JAVA的方法，我想如果加载不成一般也是JSON串的问题了。

互相学习。希望得到大家的指教。