做了个简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。
1.简单前台数据处理
界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：
2.JavaScript动态创建DOM对象
主要是使用JavaScript动态创建按钮、文本、链接、表格、加上CheckBox的表格(简单实现全选)，这里Table的数据是页面数据，不是服务端数据，主要是与后面的JQuery和ExtJs请求服务端数据动态创建Table的差异比较。
界面有点丑，主要是看JavaScript动态创建Dom对象，效果图：
3.JavaScript简单效果实现
主要是自定义分割文本、Timer时钟使用、JS粘贴板使用、Div随鼠标移动的简单测试，这个稍稍好看些，效果图：
4.使用XMLHttp进行Ajax调用动态创建Table
主要是使用XMLHttpRequest的AJAX请求服务端数据，服务端使用一般处理程序(*.ashx)处理，并使用JavaScriptSerializer和DataContractJsonSerializer进行对象的序列化操作，转换为JSON字符串数据发送客户端，客户端再进行反序列化操作，进行动态Table创建和数据填充。
注意：前端JQuery和ExtJs脚本的引入以及服务端两个序列化所在的命名空间(System.Web.Script.Serialization和System.Runtime.Serialization.Json)的引入。
<script src="../../Scripts/ext-base.js" type="text/javascript"></script>
<script src="../../Scripts/ext-all.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
效果图：
前端代码：
服务端代码：
5.使用JQuery和ExtJs进行Ajax调用动态创建Table
主要是对JQuery、ExtJs的Ajax使用以及如何使用JQuery、ExtJs动态创建Table对象填充数据，简单实现CheckBox的全选操作。服务端的代码是第4点的一般处理程序。效果图：
代码如下：(还是第4点的页面，再加上下面4个脚本函数)
1 //JQuery的Ajax方式取得数据,添加全选按钮
2 function JQueryAjax() {
3 var message = "JQuery信息加载中......";
4 $("#divContent").html(message);
5
6 $.ajax({
7 type: "POST",
8 url: "../Ajaxs/AjaxHandler.ashx",
9 async: true, //异步加载信息
10 dataType: "json",
11 success: function (data) {
12 $("#divContent").html("JQuery信息加载成功!");
13
14 createJQueryTable(data);
15 JQueryCHKBoxTable(data);
16 },
17 error: function () { alert("请求失败！"); }
18 });
19 }
20
21 function JQueryCHKBoxTable(data) {
22 var tab = $("<table/>", { width: "300px", cellSpacing: "1", cellPadding: "1", border: "1" });
23 $("<caption/>").text("JQuery CheckBox Table").appendTo(tab);
24
25 var ths = $("<tr/>").appendTo(tab);
26 var th0 = $("<th/>").appendTo(ths);
27 $("<input/>", { type: "checkbox", id: "chAll" }).appendTo(th0);
28 $("<th/>", { text: "名称" }).appendTo(ths);
29 $("<th/>", { text: "简介" }).appendTo(ths);
30
31 $(data).each(function (index, item) {
32 var tr = $("<tr/>").appendTo(tab);
33 var td0 = $("<td/>").appendTo(tr);
34 $("<input>", { type: "checkbox", name: "chSingle" }).appendTo(td0);
35 $("<td/>").html(item.Name).appendTo(tr);
36 $("<td/>").html(item.Html).appendTo(tr);
37 });
38
39 tab.appendTo($("#divContent"));
40
41 $("#chAll").click(function (obj) {
42 var chSingles = $("input:[name='chSingle']");
43 $(chSingles).each(function (index, item) {
44 item.checked = $("#chAll")[0].checked; //$("#chAll"),查询出来的是一个集合
45 });
46 });
47
48 // $("#chAll")[0].onclick = function () {//$("#chAll"),查询出来的是一个集合
49 // var chSingles = $("input:[name='chSingle']");
50 // $(chSingles).each(function (index, item) {
51 // item.checked = $("#chAll")[0].checked;
52 // });
53 // }
54 }
55
56 //ExtJs的Ajax方式取得数据,添加全选按钮
57 function ExtJsAjax() {
58 var message = "ExtJs信息加载中......";
59 var divContent = Ext.get("divContent");
60 Ext.DomHelper.append(divContent, "<div id='divMessage'>" + message + "</div>");
61
62 Ext.Ajax.request({
63 method: "POST",
64 url: "../Ajaxs/AjaxHandler.ashx",
65 async: true, //异步加载信息
66 success: function (response, opts) {
67 message = "ExtJs信息加载成功!";
68 //Ext.get("divMessage").dom.innerHTML = message;
69 Ext.DomHelper.append(divContent, "<div id='divMessage'>" + message + "</div>");
70
71 var data = Ext.util.JSON.decode(response.responseText);
72 createExtJsTable(data); //ExtJs创建Table
73 ExtJsCHKBoxTable(data); //ExtJs创建CheckBox的Table
74 },
75 failure: function (response, opts) { alert("请求失败！"); }
76 });
77 }
78
79 //ExtJs的CheckBox Table
80 function ExtJsCHKBoxTable(data) {
81 var divContent = Ext.get("divContent");
82 var tabTag = { tag: "table", style: "width:300px;border:1px solid blue", children: [{ tag: "caption", html: "ExtJs CheckBox Table"}] };
83 var tab = Ext.DomHelper.append(divContent, tabTag); //将table追加到divContent
84
85 //创建列头
86 var ths = { tag: "tr", children: [
87 { tag: "th", style: "border:1px solid blue", children: [
88 { tag: "input", type: "checkbox", id: "chkAll" }
89 ]
90 },
91 { tag: "th", style: "border:1px solid blue", html: "名称" },
92 { tag: "th", style: "border:1px solid blue", html: "简介" }
93 ]
94 };
95 Ext.DomHelper.append(tab, ths); //将tr追加到table
96
97 Ext.each(data, function (item) {//遍历数据
98 var trTag = { tag: "tr", children: [
99 { tag: "td", style: "border:1px solid blue", children: [{ tag: "input", type: "checkbox", name: "chkSingle"}] },
100 { tag: "td", style: "border:1px solid blue", html: item.Name },
101 { tag: "td", style: "border:1px solid blue", html: item.Html }
102 ]
103 };
104 Ext.DomHelper.append(tab, trTag); //将tr追加到table
105 });
106
107 Ext.get("chkAll").on("change", function (obj) {
108 var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合
109 Ext.each(chkSingles, function (item) {
110 item.checked = Ext.get("chkAll").dom.checked;
111 });
112 });
113
114 // Ext.get("chkAll").addListener("click", function (obj) {
115 // var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合
116 // Ext.each(chkSingles, function (item) {
117 // item.checked = Ext.get("chkAll").dom.checked;
118 // });
119 // });
120 }
6.使用JQuery和ExtJs简单创建对象
其实前面复杂的操作处理了，这个就比较简单，简单创建几个input对象。依然是第4点的页面，再加上下面2个脚本函数，代码如下：
使用原生JavaScript动态创建Table有些生硬，不太灵活；使用JQuery和ExtJs是各个API方法的调用，相对灵活些，代码也相对减小一些。
ExtJs一般不用Table来显示列表数据，一般直接用GridPanel直接绑定数据，显示数据，再加上CheckBox的多选功能。