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

最近的项目里，实现用户需要的效果，尝试使用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向前端输出动态加载的数据；

posted on 2012-06-11 16:11 EricZhen 阅读(12072) 评论(1) 编辑收藏举报

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

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