您的位置：首页 > Web前端 > JavaScript

【ExtJS实践】之一 ：TreeGrid异步加载数据

2012-06-11 16:11 555 查看
最近的项目里，实现用户需要的效果，尝试使用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向前端输出动态加载的数据；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航