tapestry 4.02中封装ext的GridPanel组件

组件概述：

    现在的项目中也采用了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"/>

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

 

<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

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 version="1.0" encoding="GB2312"?>
<!--
GridPanel
        作者：lihj
        创建日期：2008年12月17日14:52:29

        组件说明：封装Ext的GridPanel，作为Tapestry的组件。
-->
<!-- $Id: GridPanel.jwc,v 1.9 2009/01/08 03:25:20 lihj Exp $ -->

<!DOCTYPE component-specification
        PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
        "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">

<component-specification class="com.topera.unilib.components.grid.GridPanel"
                         allow-body="no" allow-informal-parameters="yes">

    <!--获取数据的url-->
    <parameter name="url" required="yes"/>
    <!--容器名称,也就是组件所生成GridPanel的id-->
    <parameter name="gridId" required="yes"/>
    <!--定义grid的reader-->
    <parameter name="reader" required="yes"/>
    <!--定义grid的hender-->
    <parameter name="header" required="yes"/>
    <!--组件所生成的ridPanel的title-->
    <parameter name="title"/>
    <!--定义GridPanel翻页的pagesize-->
    <parameter name="pageSize"/>
    <!--自动高度，默认值为true-->
    <parameter name="autoHeight"/>
    <!--高度，无值则autoHeight自动生效-->
    <parameter name="height"/>

    <!--定义GridPanel的javascript代码-->
    <inject property="script" type="script" object="GridPanel.script"/>

</component-specification>

 

GridPanel.script

<?xml version="1.0"?>
<!DOCTYPE script PUBLIC
	"-//Apache Software Foundation//Tapestry Script Specification 3.0//EN"
	"http://jakarta.apache.org/tapestry/dtd/Script_3_0.dtd">
<script>
<input-symbol key="gridId" required="yes" />
<input-symbol key="containerName" required="yes" />
<input-symbol key="url" required="yes" />
<input-symbol key="reader" required="yes" />
<input-symbol key="header" required="yes" />
<input-symbol key="title" />
<input-symbol key="pageSize" />
<input-symbol key="autoHeight" />
<input-symbol key="height" />

<body>
var reader_${gridId};
var store_${gridId};
var grid_${gridId};
var bbar_${gridId};
var sm_${gridId};
var cm_${gridId};        
Ext.onReady(function() {
    sm_${gridId} = new Ext.grid.CheckboxSelectionModel();
    cm_${gridId} = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm_${gridId},
        ${header}
    ]);

    reader_${gridId} = new Ext.data.JsonReader(
    {
    id:"id",
    root:"rows",
    totalProperty:"total"
    },
        ${reader});

    store_${gridId} = new Ext.data.Store({
        proxy:new Ext.data.HttpProxy({url:${url}}),
        remoteSort:true,
        reader:reader_${gridId}
    });   

     bbar_${gridId} = new Ext.PagingToolbar({
         pageSize:${pageSize},
         store:store_${gridId},
         displayInfo:true,
         displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
         beforePageText:'第',
         afterPageText:'页 共{0}页',
         firstText:'首页',
         prevText:'上一页',
         nextText:'下一页',
         lastText:'尾页',
         refreshText:'刷新',
         emptyMsg:"没有记录",
         plugins: [new Ext.ux.PageSizePlugin()]
     });

   var gridPanel_${containerName} = Ext.get("${containerName}");
     grid_${gridId} = new Ext.grid.GridPanel({
         id:'${gridId}',
         border:true,
         layout: 'fit',
         title:'${title}',
         width:gridPanel_${containerName}.getComputedWidth(),
<if expression="height == null">
         autoHeight:${autoHeight},
</if>
<if-not expression="height == null">
        height:${height},
</if-not>
         ds:store_${gridId},
         cm: cm_${gridId},
         sm:sm_${gridId},
         bbar:bbar_${gridId},
         viewConfig: {
             sortAscText:'升序',
             sortDescText:'降序',
             columnsText:'显示列',
             forceFit:true
         }
     });

     grid_${gridId}.render(gridPanel_${containerName});
     window.onresize = function() {
         grid_${gridId}.setWidth(gridPanel_${containerName}.getComputedWidth());
     }
     store_${gridId}.load({params:{start:0,limit:${pageSize}}});
});

function confirmSelection(yes_msg,no_msg,func) {
    var c = grid_${gridId}.getSelections();
    if (c.length > 0)
        Ext.MessageBox.confirm('消息', yes_msg, func);
    else
        Ext.MessageBox.show({
            title: '警告',
            msg: no_msg,
            buttons: Ext.MessageBox.OK,
            icon: Ext.MessageBox.WARNING
        });
}

function reloadGrid_${gridId}(){
    store_${gridId}.reload();
}
</body>

</script>               

 

GridPanel.properties

PageSize.default=20
autoHeight.default=true