EXTJS实现的TREEGRID（后台java,框架SpringMVC）

EXTJS实现的TREEGRID（后台java,框架SpringMVC）

• 
  

一。一些废话

近日来，有几个项目用到了EXTJS作为Web前端。也看到了一些童鞋苦苦在网上寻觅树形列表控件，碰巧项目中用到了一种，现在给大家分享一下。

二。前端

      前端代码，用的是JS。主要就是指定数据读取地址，然后定义列表表头。这里实例化TreeGrid对象

Js代码  

1. // function loadGrid(json) 方法中的内容，由第三个代码片段，取得表头方法调用  
2. // 等号左边，定义了一个对象，相当于var a=，这里用的是命名空间statisticBaseSummary，定义一个属于这个命名空间的对象  
3. // 等号右边实例一个TreeGrid,在ExtJs4以前的版本都是在Ext.ux.tree命名空间下，ExtJs4以及日后版本全部整理到了Ext.Forml的空间下  
4. // 并且名称发生了变化  
5. statisticBaseSummary.gridPanel = new Ext.ux.tree.TreeGrid({  
6.         autoScroll : 'auto',// 滚动条  
7.         baseParams: statisticBaseSummary.parameter,// 请求树形数据参数  
8.         columnLines: true,// 斑马线  
9.         columns: Ext.util.JSON.decode(createDynamicGrid(fieldsArr, headerArr, headerHiddenArr, fieldsWidthArr, fieldsAlingArr)),// 动态列，如果不用动态列可以直接定义，关于动态列的做法另开博文介绍  
10.         tbar : statisticBaseSummary_tbar,  
11.         region : 'center',  
12.         loadMask : true,// 如何加载  
13.         useArrows: true,  
14.         enableSort : false,  
15.         animate: true,  
16.         enableDD: true,  
17.         containerScroll: true,  
18.         requestMethod : 'POST',// 请求方式  
19.         // 这里发现没有用到store对象，直接定义了一个服务器请求地址（statisticBaseSummary.reportUrl，这个是在文件头部定义的静态常量，value是url地址，比如：path + '/getTreeGridInfo'等等）  
20.         // 我们可以看看TreeGrid的源码发现，虽然没有定义store对象但是在源码中确实实例了一个store对象，可以想象，我们应该可以用store来处理数据请求  
21.         // 不过设立了dataUrl这种方式虽然有数据处理局限性，但是目前我还是建议用3.x版本的童鞋都采用这种方式  
22.         dataUrl: statisticBaseSummary.reportUrl,  
23.         listeners: {  
24.                 // 数据返回到页面之后触发这个事件  
25.             load : function(node) {  
26.                 // 监听你想的处理，比如load的等待画面隐藏之类的  
27.             }  
28.         }  
29.     });  

 下面这个方法，是做一个列头出来。

Js代码  

1. /** 基本信息-数据列 */  
2. function createDynamicGrid(fieldsArr, headerArr, headerHiddenArr, fieldsWidthArr, fieldsAlingArr) {  
3.     var statisticColumns = "[";  
4.     for (var i = 0; i < fieldsArr.length; i++) {  
5.         statisticColumns += "{header:\"<div style='text-align:center'>" + headerArr[i] + "</div>\", width:" + fieldsWidthArr[i] + ", dataIndex:'" + fieldsArr[i] + "', hidden:" + headerHiddenArr[i] + ", align:'" + fieldsAlingArr[i] + "'}";  
6.         if (i < fieldsArr.length - 1) {  
7.             statisticColumns += ",";  
8.         }  
9.     }  
10.     statisticColumns += "]";  
11.     return statisticColumns;  
12. }  

 下面这个方法是上面的方法所需的参数，是异步取得，但是一定要在new gridtree之前取得。

 

Js代码  

1. /** 取得表头 */  
2. function getData() {  
3.     Share.AjaxRequest({  
4.         method: 'POST',  
5.         url: homePage.homePageHeaderUrl, // 设定Ajax请求数据源路径  
6.         showMsg : false,  
7.         params : homePage.parameter,  
8.         callback : function(json) {  
9.             //var obj = Ext.util.JSON.decode(request.responseText);  
10.             var obj = json.o;  
11.             homePage.headerMsg = obj;  
12.             loadGrid(json); // 这个loadGrid方法就是上面的构造树形列表的方法  
13.         }  
14.     });  
15. }  

 

三。后端

      相对前端来说，后端动态取得一个可以让TreeGrid能够识别的数据则是关键的地方。后端我用的是JAVA，框架是SpringMVC。数据总体来说是一个List（里面放着Map）。

      （一） 我们首先需要分析，官方给的例子的JSON数据是什么样子的。

Js代码  

1. [{  
2.     // 表头第一列，该列也是树形列(aList：把这一列的数据作为aList)，可以看图一  
3.     task:'Project: Shopping',  
4.     // 表头第二列，从这列开始就是与第一列的每一个节点所对应的数据字段了（把从第二以及以后列的数据作为bList）  
5.     duration:13.25,  
6.     user:'Tommy Maintz',// 表头第三列  
7.     iconCls:'task-folder',// 节点图标样式，与数据无关  
8.     expanded: true,//是否可以展开，与数据无关  
9.     // 接下来就是上面那个节点task:'Project: Shopping'的子节点以及子节点对应的数据  
10.     children:[{  
11.         // 表头第一列，该列也是树形列(aList：把这一列的数据作为aList)，可以看图一  
12.         task:'Housewares',  
13.         // 表头第二列，从这列开始就是与第一列的每一个节点所对应的数据字段了（把从第二以及以后列的数据作为bList）  
14.         duration:1.25,  
15.         user:'Tommy Maintz',// 表头第三列  
16.         iconCls:'task-folder',// 节点图标样式，与数据无关  
17.           
18.         // 接下来就是上面那个节点task:'Project: Shopping'的子节点以及子节点对应的数据  
19.         children:[{  
20.             task:'Kitchen supplies',  
21.             duration:0.25,  
22.             user:'Tommy Maintz',  
23.             leaf:true,  
24.             iconCls:'task'  
25.         }  
26.    // 下面的代码我就略去了，上面的编码已经说明了Treegrid的数据格式  
27.    // 首先task这个属性是固定的  
28.    .......  
29.     ]}  
30. }]  

 

 

      （二）看过数据格式了，那么我们分析一下。

从这段代码可以看出，数据属性格式，一共分为三部分，一个是节点，一个是节点对应的数据，一个是节点对应的子节点以及子节点的数据。请往下看

 第一部分（节点）：

 task：树形的节点，这个请固定不要更改

 iconCls：树形节点的icon

 expanded：树形节点是否可以展开

 第二部分（节点对应的数据）：

 duration、user：这是数据表示列，样例中是有两个，但是我们可以定义很多列，当然你需要表示的列为准

 第三部分（子节点以及节点对应数据）

 children：隶属于该节点的下属节点以及节点数据。

 

      针对于第三部分来说，我们可以发现，children中的结构实际上就是包含了上述这三部分属性内容。如果这块比较难以理解的话，我们可以倒过来想。有一个这样的叶子节点A，这种节点是一个没有子节点的节点，那么A的children属性是没有内容的是null,B节点是A节点的父节点，那么B节点的children属性内容就是A。这样大家明了了吧，如果再进一步，假设C节点是B节点的父呢？C节点的children属性内容就是B，那么C-B-A就构成了三级树形结构，其中这三个节点的属性字段都是一致的只是内容不同。这里大家会问，如果B节点的子节点是A和D呢，那么B的children属性值就是A+D，储存形式是：chidren.add(A),chidren.add(D)。这样一来B的子节点就是A和D了。

 

（三）如何实现。

首先，我们要定义一个List allList;

其次，我们要定义一个Model，这里我们定义为HashMap rootMap;

最后，我们要有两个中间交换变量，一个是childrenList，childrenMap;

 

那么我们现在从数据库检索出来两个List：

1.aList：代表树形节点数据，里面的Model一定会有这样几种字段：

parentId（该节点的父节点id）

id（该节点id，一般为主键）

name(该节点名称)

type(是否为叶子节点)

level(节点等级)

weight(权重，一般用于排序来用)

  这些字段，我们只用前4个即可。

2.bList：代表对应树形节点的数据，这里面的Model一般是我们自定义的，且一定有一个或者多个字段与树形节点对应。

 

       接下来我们谈谈如何打造出样例中的数据。

       其实就是将aList与bList结构逻辑化为样例中的数据格式，就是讲这两个List置换成rootMap放到allList中。

 

Java代码  

1. // 我们需要两个方法，一个是调用，一个是执行转换  
2. public ArrayList result() {  
3.         // 。。。。。前面的代码省略  
4.         // 先定义一个返回List，就是最终我们需要的Treegrid默认的数据格式  
5.         ArrayList allList = new ArrayList<HashMap<String, Object>>();  
6.         // 定义一个根Map，这个Map直接被allList.add(rootMap)这个List中  
7.         HashMap rootMap = new HashMap();  
8.           
9.         // 定义子List  
10.         ArrayList childrenList= new ArrayList<HashMap<String, Object>>();  
11.         // 定义子Map，这个Map直接被allList.add(rootMap)这个List中  
12.         HashMap childrenMap = new HashMap();  
13.   
14.         // 下面是aList, bList的定义，大家可以更改  
15.     List<HashMap> bList = dao.getBList();  
16.         HashMap<String, Object> bResult = new HashMap<String, Object>();  
17.     String temp = "";  
18.     for (Iterator iterator = bList.iterator(); iterator.hasNext();) {  
19.         HashMap rs = (HashMap) iterator.next();  
20.           
21.         ModelB modelB= new ModelB();  
22.         temp = rs.get("ID") == null ? "" : rs.get("ID").toString();// 对应的树形节点ID  
23.         modelB.setFiled1(Integer.parseInt(rs.get("filed1") == null ? "0" : rs.get("filed1").toString()));  
24.         modelB.setFiled2(Integer.parseInt(rs.get("filed2") == null ? "0" : rs.get("filed2").toString()));  
25.         modelB.setFiled3(Integer.parseInt(rs.get("filed3") == null ? "0" : rs.get("filed3").toString()));  
26.       
27.         bResult.put(temp, modelB);  
28.     }  
29.   
30.         ArrayList aList = dao.getAList();  
31.         Iterator iterator = aList.iterator();  
32.     if (iterator.hasNext()) {  
33.                 HashMap tempMap = (tempMap)iterator.next();  
34.                 String id = <span style="font-size: 1em; line-height: 1.5;">tempMap</span><span style="font-size: 1em; line-height: 1.5;">.get("ID");</span>  
35.                 String parentId = <span style="font-size: 1em; line-height: 1.5;">tempMap</span><span style="font-size: 1em; line-height: 1.5;">.get("parentId");</span>  
36.                 String name = <span style="font-size: 1em; line-height: 1.5;">tempMap</span><span style="font-size: 1em; line-height: 1.5;">.get("name");//第一条树形结构数据，一定要是根节点。比如总计、合计等。也就是说在aList取得的语句中要排序</span>  
37.                 rootMap.put("task", name);  
38.         rootMap.put("expanded", "true");  
39.                 run(iterator, rootMap, null, bResult, childrenList)  
40.     }  
41.   
42.   
43.         // 调用执行转换方法返回追最终的List  
44.         allList.add(rootMap);  
45.   
46.         // 返回查询的List  
47.         return allList;  
48. }  
49.   
50. /** 
51.  * Treegrid数据转换 
52.  *  
53.  * @param  iterator：节点记录 
54.  * @param  parent：父节点对象 
55.  * @param  last：子节点对象 
56.  * @param  bResult：节点对应的数据 
57.  * @param  childrenList：子节点集合 
58.  * @return  
59.  */  
60. public void run(Iterator iterator, HashMap parent, HashMap last, HashMap bResult, ArrayList childrenList) {  
61.        // 如果last（这个对象是子节点对象，包括子节点和对应的数据，第一次进到这个方法的时候为null）非空，则将last放到parent中  
62.        if (last!= null) parent.put("children", last);  
63.        if (childrenList== null) childrenList= new ArrayList<HashMap<String, Object>>();  
64.        while (iterator.hasNext()) {  
65.                 // 得到节点  
66.                 HashMap rs = (HashMap) iterator.next();  
67.                 // 声明一个ic，这个对象就是子节点对象，包括节点和节点对应的数据  
68.                 HashMap ic = new HashMap();  
69.                 String id = <span style="font-size: 1em; line-height: 1.5;">rs</span><span style="font-size: 1em; line-height: 1.5;">.get("ID");</span>  
70.                 String parentId = <span style="font-size: 1em; line-height: 1.5;">rs</span><span style="font-size: 1em; line-height: 1.5;">.get("parentId");</span>  
71.                 String name = <span style="font-size: 1em; line-height: 1.5;">rs</span><span style="font-size: 1em; line-height: 1.5;">.get("name");</span>  
72.                 ic.put("id", id);  
73.                 ic.put("parentId", parentId);          
74.                 ic.put("task", name);  
75.         ic.put("expanded", "true");  
76.                 // 利用节点ID从bResult中寻找是否有对应该节点的数据，如果有的话则将节点对应的数据put到ic中  
77.                 if (bResult.containsKey(ic.get("id")))  
78.             ic.put("children", bResult.get(ic.get("id")));  
79.         else  
80.                         ic.put("children", "");  
81.   
82.                         // 下面的代码就很重要了，是一个递归调用自身的逻辑  
83.                         // 首先判断节点对应的数据是否存在，如果为null则代表该节点为根节点  
84.                        if (last == null) {  
85.                                 // 将根节点对应的数据put到父节点对象中  
86.                                 childrenList.add(ic);  
87.                                 parent.put("children", childrenList);  
88.                                 // 我们得到的ic子节点对象就变为下一次循环的父节点对象了  
89.                 last = ic;  
90.                                 // 根节点记录处理结束，进行下一节点处理，就是走上面的那个while循环的处理。  
91.             } else {  
92.                                 // 如果当前子节点对象ic所对应的父节点与前一个子节点对象last所对应的节点记录一致  
93.                                 // 代表当前子节点为前一节点子节点  
94.                                 while (ic != null && ic.get("parentId").equals(last.get("id")))  
95.                         ic = run(iterator, last, ic, bResult, null);  
96.                                 // 如果当前子节点对象ic所对应的父节点与父节点对象parent所对应的节点记录一致  
97.                                 // 代表当前子节点与前一节点同为parent的子节点  
98.                 if (ic != null && ic.get("parentId").equals(parent.get("id"))) {  
99.                                         childrenList.add(ic);  
100.                     parent.put("children", childrenList);  
101.                     last = ic;  
102.                 } else  
103.                     return ic;  
104.             }  
105.          }  

 

以上代码则完成了aList，bList的转换，返回结果为Treegrid能够解析的数据，接下来就是返回给页面端的Controller.java

    介绍这个文件主要就是告诉大家，利用SpringMVC框架直接返回List对象给TreeGrid控件。

Java代码  

1. /** Report列表数据 */  
2.     @RequestMapping(value = "statisticSummarizing", method = RequestMethod.POST)  
3.     @ResponseBody  
4.     public ListstatisticSummarizing(ExtPager pager, HttpServletRequest request,  
5.             @RequestParam(required = false, defaultValue = "") HashMap<String, String> queryParam) {  
6.         //清除空字符串  
7.         Criteria criteria = new Criteria(request, queryParam, dataDialect);  
8.         if (pager.getLimit() != null && pager.getStart() != null) {  
9.             criteria.setSplit(pager);  
10.         }  
11.                 //这里返回了List容器对象，这个对象直接会被TreeGrid控件解析  
12.         return statisticManager.statisticSummarizing(criteria);  
13.     }  

四。总结

      以上就是EXTJS实现的TREEGRID的具体步骤，如有不明请留言。

五。整个代码

Js代码  

1. <%@ page language="java" contentType="text/html; charset=UTF-8"%>  
2. <%@ page import="java.util.*;"%>  
3. <%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>  
4. <div id="${param.id}_div"></div>  
5. <script type="text/javascript">  
6. Ext.ns("Ext.Conac.homePage");  
7. homePage = Ext.Conac.homePage;  
8. homePage = {  
9.     homePageHeaderUrl : ctx + "/homepage/homePageHeader",  
10.     homePageDataUrl : ctx + "/homepage/homePageData",  
11.     zhuanSongPage : ctx + "/instauration/zhuanSongPage",  
12.     parameter : new Object(),  
13.     headerMsg : '',  
14.     reportType : 'summary', // 统计报告类型：简表：simple，汇总：summary  
15.     reportFlag : '2',  
16.     searchFlag : '0',  
17.     textFlag : '0',   
18.     treeParentId : '',  
19.     treeGroupId : '1',  
20.     treeGroupName : 'XXXXXX',  
21.     headerMsg : '',  
22.     type : '1'  // 统计表查询功能  
23. };  
24.   
25. /** Search页面 */  
26. homePage.searchPanel = new Ext.form.FormPanel({  
27.         region : 'north',  
28.         margins:'1 1 1 1',  
29.         border:false,  
30.         height: 60,  
31.         layout : 'absolute',  
32.         defaults: {  
33.             style: {  
34.                 margin: '0 0 0 10px'   
35.             }  
36.         },  
37.         items: [{  
38.                 xtype: 'checkbox',  
39.                 name :'searchFlag',  
40.                 boxLabel: '<b>点击这里搜索</b>',  
41.                 listeners :{  
42.                     check : function(chkBox,checked){  
43.                         var f = homePage.searchPanel.findById('homePage-fieldset1');  
44.                         var c = homePage.searchPanel.findById('homePage-container1');  
45.                           
46.                         if(checked){  
47.                             f.setVisible(true);  
48.                             homePage.searchPanel.setHeight(170);  
49.                             c.setPosition(0,145);  
50.                         }else{  
51.                             homePage.searchPanel.getForm().reset();  
52.                             f.setVisible(false);  
53.                             homePage.searchPanel.setHeight(60);  
54.                             c.setPosition(0, 35);  
55.                         }  
56.                         if(homePage.myPanel){  
57.                             homePage.myPanel.doLayout(false);  
58.                         }  
59.                     }  
60.                 }  
61.             },{  
62.                 id:'homePage-fieldset1',  
63.                 xtype: 'fieldset',  
64.                 height: 130,  
65.                 layout: 'absolute',  
66.                 hidden: true,  
67.                 border: false,  
68.                 x: 30,  
69.                 y: 25,  
70.                 items: [{  
71.                         xtype: 'label',  
72.                         text: 't1：',  
73.                         x: 5,  
74.                         y: 5  
75.                     },{  
76.                         xtype: 'label',  
77.                         text: 't2：',  
78.                         x: 5,  
79.                         y: 30  
80.                     },{  
81.                         xtype: 'label',  
82.                         text: 't3：',  
83.                         x: 5,  
84.                         y: 50  
85.                     },{  
86.                         xtype: 'textfield',  
87.                         name:'certId',  
88.                         maxLength: 12,  
89.                         maxLength: 12,  
90.                         width: 225,  
91.                         x: 75,  
92.                         y: 0  
93.                     },{  
94.                         xtype: 'textfield',  
95.                         name:'unitName',  
96.                         maxLength: 50,  
97.                         width: 225,  
98.                         x: 75,  
99.                         y: 25  
100.                     },{  
101.                         id:'holdUnit',  
102.                         xtype: 'textfield',  
103.                         name:'holdUnit',  
104.                         editable: false,  
105.                         width: 225,  
106.                         x: 75,  
107.                         y: 50  
108.                     },{  
109.                         xtype: 'button',  
110.                         width: 50,  
111.                         iconCls:'tick',  
112.                         text: '选择',  
113.                         x: 300,  
114.                         y: 50,  
115.                         handler :function(){  
116.                             Share.SelectJbdwCategory.show('holdUnit', 'jbdwId');  
117.                         }  
118.                     },{  
119.                         xtype: 'button',  
120.                         width: 50,  
121.                         iconCls:'query',  
122.                         text: '搜索',  
123.                         x: 160,  
124.                         y: 77,  
125.                         handler :function(){                              
126.                             var params = homePage.searchPanel.getForm().getValues();  
127.                             homePage.parameter["flag"] = params.flag;   // 0: ;1:  
128.                             homePage.parameter["certId"] = params.certId;  
129.                             homePage.parameter["unitName"] = params.unitName;  
130.                             homePage.parameter["holdUnit"] = params.holdUnit;  
131.                               
132.                             callReport();  
133.                         }  
134.                      
135.                     },{  
136.                         xtype: 'radio',  
137.                         name : 'flag',  
138.                         checked :true,  
139.                         inputValue: '0',  
140.                         boxLabel: '不搜索子节点',  
141.                         x: 370,  
142.                         y: 50  
143.                     },{  
144.                         xtype: 'radio',  
145.                         name : 'flag',  
146.                         inputValue: '1',  
147.                         boxLabel: '搜索子节点',  
148.                         x: 470,  
149.                         y: 50  
150.                     },{  
151.                         id : 'jbdwId',  
152.                         xtype: 'hidden',  
153.                         name:'jbdwId'  
154.                     }  
155.                 ]  
156.             },{  
157.                   xtype: 'container',  
158.                   id : 'homePage-container1',  
159.                   html: "<div style=\"color:blue;\"><a href=\"#\" οnclick=\"Share.openMorePage('/homepage/quickAnnualCheck','快速年检')\"><b>${annualCheckYear}t4</b></a></div>",  
160.                   x: 0,  
161.                   y: 35  
162.               }  
163.         ]  
164.     });  
165.       
166. /** Report报表 */  
167. homePage.reportGrid = new Ext.FormPanel({  
168.     layout: 'fit',  
169.     border:false,  
170.     region : 'center'  
171. });  
172.   
173. /** 最外层布局 */  
174. homePage.myPanel = new Ext.Panel({  
175.     renderTo : '${param.id}' + '_div',  
176.     layout: 'border',  
177.     border:false,  
178.     items: [homePage.searchPanel, homePage.reportGrid],  
179.     height : index.tabPanel.getInnerHeight() - 1  
180. });  
181.   
182. /** 基本信息-数据列 */  
183. function createDynamicGrid(fieldsArr, headerArr, headerHiddenArr, fieldsWidthArr, fieldsAlingArr) {  
184.     var statisticColumns = "[";  
185.     for (var i = 0; i < fieldsArr.length; i++) {  
186.         statisticColumns += "{header:\"<div style='text-align:center'>" + headerArr[i] + "</div>\", width:" + fieldsWidthArr[i] + ", dataIndex:'" + fieldsArr[i] + "', hidden:" + headerHiddenArr[i] + ", align:'" + fieldsAlingArr[i] + "'}";  
187.         if (i < fieldsArr.length - 1) {  
188.             statisticColumns += ",";  
189.         }  
190.     }  
191.     statisticColumns += "]";  
192.     return statisticColumns;  
193. }  
194.   
195. /** report表单展示 */  
196. function loadGrid(json) {  
197.     waiting = Ext.Msg.wait('正在处理，请稍等...', '', '');  
198.     var fieldsArr = new Array();  
199.     var headerArr = new Array();  
200.     var headerHiddenArr = new Array();  
201.     var fieldsWidthArr = new Array();  
202.     var fieldsAlingArr = new Array();  
203.     var records = json.rows;    // 将Json数据过滤得到每一行数据  
204.     // 将过滤过的Json的行数分进行如下操作  
205.     for(var i=0;i<records.length;i++){  
206.         // 取得每一个域名种类  
207.         var record = records[i];  
208.         fieldsArr[i] = record.name;  
209.         headerArr[i] = record.text;  
210.         headerHiddenArr[i] = record.hidden;  
211.         fieldsWidthArr[i] = record.width;  
212.         fieldsAlingArr[i] = record.alignment;  
213.     }     
214.       
215.     /** Report顶部工具条 */  
216.     homePage.tbar = new Ext.Toolbar({  
217.         height: 26,  
218.         items: ["<div id='_tbar_item'>t5</div>"]  
219.     });  
220.       
221.     /** Report中央布局如果已经渲染关闭数据加载窗口 */  
222.     if (homePage.reportGrid) {  
223.         /** Report顶部工具条-信息 */  
224.         if (waiting != null) {  
225.             waiting.hide();  
226.         }  
227.     }  
228.   
229.     /** Report中央布局  */  
230.     homePage.gridPanel = new Ext.ux.tree.TreeGrid({  
231.         enableSort : false,  
232.         autoScroll : 'auto',  
233.         baseParams: homePage.parameter,  
234.         columns: Ext.util.JSON.decode(createDynamicGrid(fieldsArr, headerArr, headerHiddenArr, fieldsWidthArr, fieldsAlingArr)),  
235.         tbar : homePage.tbar,  
236.         region : 'center',  
237.         loadMask : true,  
238.         useArrows: true,  
239.         autoScroll: true,  
240.         animate: true,  
241.         enableDD: true,  
242.         containerScroll: true,  
243.         border: false,  
244.         requestMethod : 'POST',  
245.         dataUrl: homePage.homePageDataUrl,  
246.         listeners: {  
247.             load : function(node) {  
248.                 if (node.isFirst) {  
249.                     if (waiting != null) {  
250.                         waiting.hide();  
251.                     }  
252.                 }  
253.             }  
254.         }  
255.     });  
256.       
257.     homePage.reportGrid.add(homePage.gridPanel);  
258.     homePage.reportGrid.doLayout(false);  
259. }  
260.   
261. /** 取得表头 */  
262. function getData() {  
263.     Share.AjaxRequest({  
264.         method: 'POST',  
265.         url: homePage.homePageHeaderUrl, // 设定Ajax请求数据源路径  
266.         showMsg : false,  
267.         params : homePage.parameter,  
268.         callback : function(json) {  
269.             //var obj = Ext.util.JSON.decode(request.responseText);  
270.             var obj = json.o;  
271.             homePage.headerMsg = obj;  
272.             loadGrid(json);  
273.         }  
274.     });  
275. }  
276.   
277. /** 确定按钮操作 */  
278. function callReport() {   
279.     homePage.reportGrid.remove(homePage.gridPanel);  
280.   
281.     homePage.parameter["start"] = '0';  // 初期表示数据  
282.     homePage.parameter["limit"] = homePage.pageSize;                // 统计表查询功能  
283.       
284.     // 取得表头   
285.     getData();  
286. }  
287.   
288. callReport();  
289.   
290. //转送  
291. function openZhuanSong(sydwName, applyId) {  
292.     homePage.zhuansongWindow = new Ext.Window({  
293.         title : '转送',  
294.         pageY : 100,  
295.         width :370,  
296.         height : 180,  
297.         plain : true,  
298.         border : false,  
299.         modal : true,  
300.         resizable : false,  
301.         autoScroll : true,  
302.         autoLoad : {  
303.             url : homePage.zhuanSongPage,  
304.             params : {  
305.                 sydwName : sydwName,  
306.                 applyId : applyId  
307.             },  
308.             method: 'GET',  
309.             scripts : true,  
310.             nocache : true  
311.         }  
312.     });  
313.     homePage.zhuansongWindow.show();  
314. }  
315.   
316. </script>