ExtJS——TreeGrid异步加载
http://www.cnblogs.com/Ericzhen/archive/2012/06/11/2545186.html
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向前端输出动态加载的数据；