登录
当前位置： 首页 > 工具软件 > tapestry组件库 > 使用案例 >

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 
 类似资料：

相关阅读

如何用Java封装数组bootstrap select插件封装成Vue2.0组件你有二次封装过ElementUI组件吗？Vuejs 页面的区域化与组件封装的实现Java中可变对象的封装

相关文章

类成员的访问权限以及类的封装RecordAccumulator封装消息程总体流程Go语言封装简介及实现细节Java15 Record的sealed密封类Java16 sealed密封类

相关问答

理解OOP中的封装和抽象封装的概念[复制]bluebirdjspromise封装在for循环中封装在Java模型类中前端 - 封装 React 父组件 使子组件添加确认框？

相关文档

php-ext-xlswriter 高性能 Excel 扩展Element UI 组件中文文档MOYE 知心组件库中文文档Element React 组件帮助中文文档Element Angular 组件帮助中文文档
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.