extjs中treegrid
extjs中treegridExt下载的实例文件里，我们可以找到treegrid的实例，大家可以先分析官网的源码实例，加深印象。下面通过简单的实例介绍treegrid的用法
使用treegrid，需要在调用页面的head中加载以下几个文件：
<link rel="stylesheet" type="text/css" href="css/ext-all。css">
<script type="text/javascript" src="ext-all。js"></script>
<script type="text/javascript" src="treegrid。js"></script>
treegrid实例
1、完整实例
<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">
<li id="tree">
</li>
</form>
</body>
</html>
Ext.onReady(
实例说明
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向前端输出动态加载的数据；
实例二、ext treegrid 异步加载
js代码如下