tapestry 4.02中封装ext的GridPanel组件

充培
2023-12-01

组件概述:

    现在的项目中也采用了Ext作为前端页面显示的部分。初期用ext的时候都是在页面中写大量的javascript代码,大部分的代码都是重复新的工作, 如声明一个GridPanel,声明一个store,reader等等,而且以后的页面也不容易维护,新人来了上手也比较慢,需要学习大量的ext的知 识。于是就决定把ext的三大组件封装成ext的组件。第一个封装的就是Ext.grid.GridPanel组件。GridPanel组件封装了Ext 的GridPanel。该组件会在页面生成一个div标签,作为Ext.GridPanel显示的容器。div的id为”div_”+gridId,其中 gridId是组件的id。使用该组件的前提条件是保证页面内已经引入了运行ext必需的库文件,如ext-all.js,ext- core.js,ext-all.css。

 

使用说明:

     在一个web应用中使用GridPanel组件前需要在tapestry的应用程序文件(如Unilib.application)中注册组件,如下所示:
<component-type type="GridPanel" specification-path="/com/lihj/components/grid/GridPanel.jwc"/>

在页面内的使用方法如下:

 

Java代码
  1. <span jwcid="myGrid@GridPanel"  
  2.      gridId="myGrid"  
  3.      url="document.getElementById('info').href"  
  4.      title="&nbsp;&nbsp;&nbsp;列表"  
  5.      reader="id:int,personByExpenceAccountId,personByConfirmPersonId,personByPayPersonId,money,remark,date,capitalizationMoney"  
  6.      header="{header: '报销人', width: 50, sortable: true, dataIndex: 'personByExpenceAccountId'},  
  7.      {header: '批准人', width: 50, sortable: true, dataIndex: 'personByConfirmPersonId'},  
  8.      {header: '出纳', width: 50, sortable: true, dataIndex: 'personByPayPersonId',renderer:buildDetailLink},  
  9.      {header: '报销金额小写', width: 50, sortable: true, dataIndex: 'money'},  
  10.      {header: '备注', width: 60, sortable: true, dataIndex: 'remark'},  
  11.      {header: '报销日期', width: 50, sortable: true, dataIndex: 'date'},  
  12.      {header: '报销金额大写', width: 50, sortable: true, dataIndex: 'capitalizationMoney'},  
  13.      {header: '操作', width: 20, sortable: false, dataIndex: 'id',renderer:buildEditLink}"  
  14. />  
<span jwcid="myGrid@GridPanel"
     gridId="myGrid"
     url="document.getElementById('info').href"
     title="&nbsp;&nbsp;&nbsp;列表"
     reader="id:int,personByExpenceAccountId,personByConfirmPersonId,personByPayPersonId,money,remark,date,capitalizationMoney"
     header="{header: '报销人', width: 50, sortable: true, dataIndex: 'personByExpenceAccountId'},
     {header: '批准人', width: 50, sortable: true, dataIndex: 'personByConfirmPersonId'},
     {header: '出纳', width: 50, sortable: true, dataIndex: 'personByPayPersonId',renderer:buildDetailLink},
     {header: '报销金额小写', width: 50, sortable: true, dataIndex: 'money'},
     {header: '备注', width: 60, sortable: true, dataIndex: 'remark'},
     {header: '报销日期', width: 50, sortable: true, dataIndex: 'date'},
     {header: '报销金额大写', width: 50, sortable: true, dataIndex: 'capitalizationMoney'},
     {header: '操作', width: 20, sortable: false, dataIndex: 'id',renderer:buildEditLink}"
/>

 

组件生成的代码如下:

 

 

下面是源代码:

 

该组件一共有四个文件:GridPanel.java,GridPanel,jwc,GridPanel,script,GridPanel.properties

也可通过附件打包下载。

 

GridPanel.java

Java代码
  1. package com.lihj.components.grid;  
  2.   
  3. import org.apache.tapestry.*;  
  4. import org.apache.hivemind.Messages;  
  5.   
  6. import java.util.HashMap;  
  7. import java.util.Map;  
  8. import java.util.regex.Pattern;  
  9. import java.util.regex.Matcher;  
  10.   
  11. /** 
  12.  * 标题: 
  13.  * <p/> 
  14.  * 描述: 
  15.  * <p/> 
  16.  * 日期: 2008-12-16 
  17.  * 时间: 15:40:12 
  18.  * 
  19.  * @author lihj 
  20.  * @version $Id: GridPanel.java,v 1.12 2009/01/08 03:25:20 lihj Exp $ 
  21.  */  
  22. public abstract class GridPanel extends AbstractComponent {  
  23.   
  24.     public abstract IScript getScript();  
  25.   
  26.     private static final String SYM_GRIDID = "gridId";  
  27.     private static final String SYM_CONTAINERNAME = "containerName";  
  28.     private static final String SYM_URL = "url";  
  29.     private static final String SYM_TITLE = "title";  
  30.     private static final String SYM_READER = "reader";  
  31.     private static final String SYM_HEADER = "header";  
  32.     private static final String SYM_PAGESIZE = "pageSize";  
  33.     private static final String SYM_AUTOHEIGHT = "autoHeight";  
  34.     private static final String SYM_HEIGHT = "height";  
  35.   
  36.     public abstract String getGridId();  
  37.   
  38.     public abstract String getUrl();  
  39.   
  40.     public abstract String getTitle();  
  41.   
  42.     public abstract String getReader();  
  43.   
  44.     public abstract String getHeader();  
  45.   
  46.     public abstract String getPageSize();  
  47.   
  48.     public abstract String getAutoHeight();  
  49.   
  50.     public abstract String getHeight();  
  51.   
  52.     protected void renderComponent(IMarkupWriter writer, IRequestCycle cycle) {  
  53.         PageRenderSupport pageRenderSupport = TapestryUtils.getPageRenderSupport(cycle, this);  
  54.         Messages messages = getMessages();  
  55. //        GridPanel显示容器的名称和id,都等于"div_"加上gridId  
  56.         String containerName = "div_" + getGridId();  
  57.         String autoHeight = getAutoHeight();  
  58.         if (autoHeight == null) {  
  59.             autoHeight = messages.getMessage("autoHeight.default");  
  60.         }  
  61.   
  62.         String height = getHeight();  
  63.         String reader = getReader();  
  64.   
  65.         //通过正则表达式替换换行和空格 start  
  66.         Pattern p = Pattern.compile("/r/n|//s");  
  67.         Matcher m = p.matcher(reader);  
  68.         reader = m.replaceAll("");  
  69.         //通过正则表达式替换换行和空格 end  
  70.           
  71.         String pageSize = getPageSize();  
  72.         if(pageSize==null){  
  73.             pageSize= messages.getMessage("PageSize.default");  
  74.         }  
  75.         String[] headerArray = reader.split(",");  
  76.         StringBuilder sb = new StringBuilder("[");  
  77.         for (String s : headerArray) {  
  78.             sb.append("{");  
  79.             if (s.contains(":")) {  
  80.                 String[] ss = s.split(":");  
  81.                 sb.append("name:'" + ss[0] + "',");  
  82.                 sb.append("type:'" + ss[1] + "'");  
  83.             } else {  
  84.                 sb.append("name:'" + s + "'");  
  85.             }  
  86.             sb.append("},");  
  87.         }  
  88.         sb.deleteCharAt(sb.toString().length() - 1);  
  89.         sb.append("]");  
  90.         Map symbols = new HashMap();  
  91.   
  92.         symbols.put(SYM_GRIDID, getGridId());  
  93.         symbols.put(SYM_CONTAINERNAME, containerName);  
  94.         symbols.put(SYM_URL, getUrl());  
  95.         symbols.put(SYM_TITLE, getTitle());  
  96.         symbols.put(SYM_READER, sb.toString());  
  97.         symbols.put(SYM_HEADER, getHeader());  
  98.         symbols.put(SYM_PAGESIZE, pageSize);  
  99.         symbols.put(SYM_AUTOHEIGHT, autoHeight);  
  100.         symbols.put(SYM_HEIGHT, getHeight());  
  101.   
  102.         getScript().execute(cycle, pageRenderSupport, symbols);  
  103.         writer.beginEmpty("div");//生成div,作为GridPanel显示的容器  
  104.         writer.attribute("id", containerName);  
  105.         writer.attribute("name", containerName);  
  106.         writer.attribute("style""width:100%");  
  107.     }  
  108. }  
package com.lihj.components.grid;

import org.apache.tapestry.*;
import org.apache.hivemind.Messages;

import java.util.HashMap;
import java.util.Map;
import java.util.regex.Pattern;
import java.util.regex.Matcher;

/**
 * 标题:
 * <p/>
 * 描述:
 * <p/>
 * 日期: 2008-12-16
 * 时间: 15:40:12
 *
 * @author lihj
 * @version $Id: GridPanel.java,v 1.12 2009/01/08 03:25:20 lihj Exp $
 */
public abstract class GridPanel extends AbstractComponent {

    public abstract IScript getScript();

    private static final String SYM_GRIDID = "gridId";
    private static final String SYM_CONTAINERNAME = "containerName";
    private static final String SYM_URL = "url";
    private static final String SYM_TITLE = "title";
    private static final String SYM_READER = "reader";
    private static final String SYM_HEADER = "header";
    private static final String SYM_PAGESIZE = "pageSize";
    private static final String SYM_AUTOHEIGHT = "autoHeight";
    private static final String SYM_HEIGHT = "height";

    public abstract String getGridId();

    public abstract String getUrl();

    public abstract String getTitle();

    public abstract String getReader();

    public abstract String getHeader();

    public abstract String getPageSize();

    public abstract String getAutoHeight();

    public abstract String getHeight();

    protected void renderComponent(IMarkupWriter writer, IRequestCycle cycle) {
        PageRenderSupport pageRenderSupport = TapestryUtils.getPageRenderSupport(cycle, this);
        Messages messages = getMessages();
//        GridPanel显示容器的名称和id,都等于"div_"加上gridId
        String containerName = "div_" + getGridId();
        String autoHeight = getAutoHeight();
        if (autoHeight == null) {
            autoHeight = messages.getMessage("autoHeight.default");
        }

        String height = getHeight();
        String reader = getReader();

        //通过正则表达式替换换行和空格 start
        Pattern p = Pattern.compile("/r/n|//s");
        Matcher m = p.matcher(reader);
        reader = m.replaceAll("");
        //通过正则表达式替换换行和空格 end
        
        String pageSize = getPageSize();
        if(pageSize==null){
            pageSize= messages.getMessage("PageSize.default");
        }
        String[] headerArray = reader.split(",");
        StringBuilder sb = new StringBuilder("[");
        for (String s : headerArray) {
            sb.append("{");
            if (s.contains(":")) {
                String[] ss = s.split(":");
                sb.append("name:'" + ss[0] + "',");
                sb.append("type:'" + ss[1] + "'");
            } else {
                sb.append("name:'" + s + "'");
            }
            sb.append("},");
        }
        sb.deleteCharAt(sb.toString().length() - 1);
        sb.append("]");
        Map symbols = new HashMap();

        symbols.put(SYM_GRIDID, getGridId());
        symbols.put(SYM_CONTAINERNAME, containerName);
        symbols.put(SYM_URL, getUrl());
        symbols.put(SYM_TITLE, getTitle());
        symbols.put(SYM_READER, sb.toString());
        symbols.put(SYM_HEADER, getHeader());
        symbols.put(SYM_PAGESIZE, pageSize);
        symbols.put(SYM_AUTOHEIGHT, autoHeight);
        symbols.put(SYM_HEIGHT, getHeight());

        getScript().execute(cycle, pageRenderSupport, symbols);
        writer.beginEmpty("div");//生成div,作为GridPanel显示的容器
        writer.attribute("id", containerName);
        writer.attribute("name", containerName);
        writer.attribute("style", "width:100%");
    }
}

 

GridPanel.jwc

Xml代码
  1. <?xml version="1.0" encoding="GB2312"?>  
  2. <!--  
  3. GridPanel  
  4.         作者:lihj  
  5.         创建日期:2008年12月17日14:52:29  
  6.   
  7.         组件说明:封装Ext的GridPanel,作为Tapestry的组件。  
  8. -->  
  9. <!-- $Id: GridPanel.jwc,v 1.9 2009/01/08 03:25:20 lihj Exp $ -->  
  10.   
  11. <!DOCTYPE component-specification  
  12.         PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN"  
  13.         "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">  
  14.   
  15. <component-specification class="com.topera.unilib.components.grid.GridPanel"  
  16.                          allow-body="no" allow-informal-parameters="yes">  
  17.   
  18.     <!--获取数据的url-->  
  19.     <parameter name="url" required="yes"/>  
  20.     <!--容器名称,也就是组件所生成GridPanel的id-->  
  21.     <parameter name="gridId" required="yes"/>  
  22.     <!--定义grid的reader-->  
  23.     <parameter name="reader" required="yes"/>  
  24.     <!--定义grid的hender-->  
  25.     <parameter name="header" required="yes"/>  
  26.     <!--组件所生成的ridPanel的title-->  
  27.     <parameter name="title"/>  
  28.     <!--定义GridPanel翻页的pagesize-->  
  29.     <parameter name="pageSize"/>  
  30.     <!--自动高度,默认值为true-->  
  31.     <parameter name="autoHeight"/>  
  32.     <!--高度,无值则autoHeight自动生效-->  
  33.     <parameter name="height"/>  
  34.   
  35.     <!--定义GridPanel的javascript代码-->  
  36.     <inject property="script" type="script" object="GridPanel.script"/>  
  37.   
  38. </component-specification>  

 

GridPanel.script

Xml代码
  1. <?xml version="1.0"?>  
  2. <!DOCTYPE script PUBLIC  
  3.     "-//Apache Software Foundation//Tapestry Script Specification 3.0//EN"  
  4.     "http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd">  
  5. <script>  
  6. <input-symbol key="gridId" required="yes" />  
  7. <input-symbol key="containerName" required="yes" />  
  8. <input-symbol key="url" required="yes" />  
  9. <input-symbol key="reader" required="yes" />  
  10. <input-symbol key="header" required="yes" />  
  11. <input-symbol key="title" />  
  12. <input-symbol key="pageSize" />  
  13. <input-symbol key="autoHeight" />  
  14. <input-symbol key="height" />  
  15.   
  16. <body>  
  17. var reader_${gridId};  
  18. var store_${gridId};  
  19. var grid_${gridId};  
  20. var bbar_${gridId};  
  21. var sm_${gridId};  
  22. var cm_${gridId};          
  23. Ext.onReady(function() {  
  24.     sm_${gridId} = new Ext.grid.CheckboxSelectionModel();  
  25.     cm_${gridId} = new Ext.grid.ColumnModel([  
  26.         new Ext.grid.RowNumberer(),  
  27.         sm_${gridId},  
  28.         ${header}  
  29.     ]);  
  30.   
  31.     reader_${gridId} = new Ext.data.JsonReader(  
  32.     {  
  33.     id:"id",  
  34.     root:"rows",  
  35.     totalProperty:"total"  
  36.     },  
  37.         ${reader});  
  38.   
  39.     store_${gridId} = new Ext.data.Store({  
  40.         proxy:new Ext.data.HttpProxy({url:${url}}),  
  41.         remoteSort:true,  
  42.         reader:reader_${gridId}  
  43.     });     
  44.   
  45.      bbar_${gridId} = new Ext.PagingToolbar({  
  46.          pageSize:${pageSize},  
  47.          store:store_${gridId},  
  48.          displayInfo:true,  
  49.          displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',  
  50.          beforePageText:'第',  
  51.          afterPageText:'页 共{0}页',  
  52.          firstText:'首页',  
  53.          prevText:'上一页',  
  54.          nextText:'下一页',  
  55.          lastText:'尾页',  
  56.          refreshText:'刷新',  
  57.          emptyMsg:"没有记录",  
  58.          plugins: [new Ext.ux.PageSizePlugin()]  
  59.      });  
  60.   
  61.    var gridPanel_${containerName} = Ext.get("${containerName}");  
  62.      grid_${gridId} = new Ext.grid.GridPanel({  
  63.          id:'${gridId}',  
  64.          border:true,  
  65.          layout: 'fit',  
  66.          title:'${title}',  
  67.          width:gridPanel_${containerName}.getComputedWidth(),  
  68. <if expression="height == null">  
  69.          autoHeight:${autoHeight},  
  70. </if>  
  71. <if-not expression="height == null">  
  72.         height:${height},  
  73. </if-not>  
  74.          ds:store_${gridId},  
  75.          cm: cm_${gridId},  
  76.          sm:sm_${gridId},  
  77.          bbar:bbar_${gridId},  
  78.          viewConfig: {  
  79.              sortAscText:'升序',  
  80.              sortDescText:'降序',  
  81.              columnsText:'显示列',  
  82.              forceFit:true  
  83.          }  
  84.      });  
  85.   
  86.      grid_${gridId}.render(gridPanel_${containerName});  
  87.      window.onresize = function() {  
  88.          grid_${gridId}.setWidth(gridPanel_${containerName}.getComputedWidth());  
  89.      }  
  90.      store_${gridId}.load({params:{start:0,limit:${pageSize}}});  
  91. });  
  92.   
  93. function confirmSelection(yes_msg,no_msg,func) {  
  94.     var c = grid_${gridId}.getSelections();  
  95.     if (c.length > 0)  
  96.         Ext.MessageBox.confirm('消息', yes_msg, func);  
  97.     else  
  98.         Ext.MessageBox.show({  
  99.             title: '警告',  
  100.             msg: no_msg,  
  101.             buttons: Ext.MessageBox.OK,  
  102.             icon: Ext.MessageBox.WARNING  
  103.         });  
  104. }  
  105.   
  106. function reloadGrid_${gridId}(){  
  107.     store_${gridId}.reload();  
  108. }  
  109. </body>  
  110.   
  111. </script>                 

 

GridPanel.properties

Properties代码
  1. PageSize.default=20  
  2. autoHeight.default=true 
 类似资料: