最近的項目里，實現用戶需要的效果，嘗試使用ExtJS3.4。
為了總結開發過程中遇到的問題，因此給自己規定了一個記錄的計划，把開發過程中解決的技術點及遇到的問題記錄下來，以備今后查詢。
第一個例子，TreeGrid異步加載數據；
TreeGrid是Ext在發布3.0版本后新增的控件，擴展Ext.ux.tree.TreePanel的功能，因此它本質上還是一棵樹。
一、參考資料
1、官網實例及幫助文檔
2、因為之前從沒有深入研究過Ext，因此在制作這個例子的過程中，參考了網上的一個朋友寫的例子，連接如下：
http://yuanlg.iteye.com/blog/920871
在他得例子的基礎上完成了我自己的實例。
二、實例完整代碼
<html> <head> <title>樹形列表</title> <!-- ext css includes --> <link href="../ExtJS/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="../extjs/examples/ux/treegrid/treegrid.css"/> <!-- ext javascript includes --> <script src="../ExtJS/adapter/ext/ext-base-debug.js" type="text/javascript"></script> <script src="../ExtJS/ext-all-debug.js" type="text/javascript"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridSorter.js"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridColumnResizer.js"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridNodeUI.js"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridLoader.js"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGridColumns.js"></script> <script type="text/javascript" src="../extjs/examples/ux/treegrid/TreeGrid.js"></script> <script type="text/javascript"> <!-- Ext.BLANK_IMAGE_URL = "/pmscost/baselib/extjs/resources/images/default/s.gif"; Ext.onReady(function() { Ext.QuickTips.init(); var tree = new Ext.ux.tree.TreeGrid({ title: 'Core Team Projects', width: 500, height: 300, //定義樹的加載器 var treeloader = new Ext.ux.tree.TreeGridLoader({ dataUrl : "../Cost_JsonDb.ashx?tablename=boq_model&parentSysId=0" }); //定義treegrid var treeGrid = new Ext.ux.tree.TreeGrid({ title : '建築工程.表三', //表頭名稱，去掉則不顯示表頭 id : "tg_boqm_c", //樹形列表id width: 1000, height: 600, //renderTo: Ext.getBody(), //autoScroll : true, //autoHeight : true, //border : false, animate : true, enableDD : true, rootVisible : false, containerScroll : true, enableSort:false, //默認為true，控件根據列的內容排序；置為false，則按照數據順序顯示 columns : [ { header : '序號', dataIndex : 'boqm_sequence', width : 150 },{ header : '定額編號', dataIndex : 'bqs_code', width : 100, align : 'center' },{ header : '項目名稱及規范', dataIndex : 'boqm_boq_name', width : 300, align : 'center' },{ header : '單位', dataIndex : 'boqm_unit', width : 80 /*, renderer : function(n) { if (n == '1') { return "省、自治區"; } else if (n == '2') { return "市、州"; } else if (n == '3') { return "縣"; } else if (n == '4') { return "鄉鎮"; } else if (n == '5') { return "村"; } } */ },{ header : '系統編號', dataIndex : 'sysid', hidden : true },{ header : '填寫方式', dataIndex : 'boqm_filltype', hidden : true },{ header : '父級編號', dataIndex : 'parent_sysid', hidden : true }], //dataUrl : 'treegrid-data.json', loader : treeloader //綁定加載器 }); // 異步加載根節點 var rootnode = new Ext.tree.AsyncTreeNode({ id : '0', text : '中華人民共和國行政區划代碼', draggable : false,// 根節點不容許拖動 expanded : true }); //設置節點屬性 rootnode.attributes = { sysid : '0', boqm_sequence : '0', bqs_code : '0', boqm_boq_name : '0', boqm_unit : '0', boqm_filltype : 'sum', parent_sysid : '-1' }; // 為tree設置根節點 treeGrid.setRootNode(rootnode); // 響應加載前事件，傳遞node參數 treeGrid.on( 'beforeload', function(node) { var sysid = node.attributes["sysid"]; //alert(sysid); treeGrid.loader.dataUrl = "../Cost_JsonDb.ashx?tablename=cost_boq_model&parentSysId=" + sysid; // 定義子節點的Loader }, treeloader ); treeGrid.render(Ext.getBody()); treeGrid.expand(false,false); }); //--> </script> </head> <body> <form id="form1" runat="server"> <div id="tree"> </div> </form> </body> </html>
三、注意事項
1、Ext框架中所有的圖片均先放置一個空白的s.gif文件，然后再用需要顯示的圖片替換s.gif。默認狀態下，Ext控件會到官網下載s.gif。
如果你的程序是在內網發布，不發訪問外網的話，可以使用Ext自帶的s.gif替換，具體方法如下：
Ext.BLANK_IMAGE_URL = extjs/resources/images/default/s.gif";
2、我是在ASP.Net下使用的Ext，vs.net在新增一個aspx文件時，會自動增加DOCTYPE。如果使用ext控件，一定要把這個東西去掉。
3、實例化TreeGrid時，不要指定rendeTo屬性，而是要在最后通過TreeGrid.render(object)的方式渲染控件。否則，成宿會報“this.ui為空或不是對象”錯誤。
4、根節點可以在TreeGrid的Config參數中指定，也可以通過setRootNode方法指定。不論使用哪種方法，都需要指定一個TreeNode對象。
官網幫助文檔中給出的演示代碼中，在Config中指定root屬性的值，是一組json值，程序會報錯。
5、使用.net的事務處理文件ashx向前端輸出動態加載的數據；