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>
    
    <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"/>
    
    
    <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">
    
    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向前端输出动态加载的数据;

你可能感兴趣的:((ExtJS系列),extjs,header,stylesheet,ext,function,tree)