一个基于Extjs 3的支持单元格合并的面板

这是一个支持单元格合并的Panel，不是基于 GridPanel，而是基于 Ext.Panel 这个类。内部表格实现是基于 html 的 <table> 标签的。支持增删。效果图如下：

代码依赖 Extjs 3 和 JQuery，请自行添加。废话少说，上代码。

js 部分（直接调用 tableTag() 方法就可以显示出效果了）：

Array.prototype.remove=function(dx)
{
	if(isNaN(dx) || dx > this.length || dx < 0) return false;

	for(var i=0,n=0;i<this.length;i++)
	{
		if(this[i] != this[dx]) this[n++] = this[i]
	}
	this.length -= 1
};


Ext.ns('Ext.ns.my.tag');

/**
 * 这是一个可以自适应、自动合并的表格面板。此代码依赖 JQuery。
 */
Ext.ns.my.tag.TagTablePanel = Ext.extend(Ext.Panel,
{
	/**
	 * 默认自动显示滚动条
	 */
	autoScroll : true, 
	/**
	 * 列标题。元素是 js 对象。下面是对象各个字段的意义：
	 * 
	 * header: 
	 * 		必输项；类型：文本。表示列标题
	 * 
	 * width: 
	 * 		可选项；类型：文本，正整数；单位：px。表示列宽。支持正整数，和'*', 'auto'。默认 '*'。
	 * 
	 * textHorizontalAlignment: 
	 * 		可选项；类型：文本。表示数据域文本水停靠位置。可选的值为：'left'、'center'、'justify'、
	 * 		'inherit'和'right'。默认不设定此项。
	 * 
	 * renderer:
	 * 		可选项；函数。用于根据数据渲染显示。参数 (oldValue, rowNum, colNum, record)。返回一个
	 * 		HTML 字符串。默认照常显示数据文本。
	 * 
	 * hidden: 
	 * 		可选项；类型：布尔值。表示当前列是否隐藏。true 表示隐藏。默认 false（不隐藏）。
	 */
	colHeaders: [],
	/**
	 * 要合并的列的序号，从 0 开始
	 */
    mergeCols: [],
    /**
     * 面板中的数据
     */
    records: [],
    /**
     * 被点击的单元格所在的列号，默认 -1
     */
    selectedColNumber: -1,
    /**
     * 被点击的单元格所在的行号，默认 -1
     */
    selectedRowNumber: -1,
    initComponent : function()
    {
    	Ext.ns.my.tag.TagTablePanel.superclass.initComponent.call(this); // 调用父类的初始化方法

    	// 初始化表格和列标题
    	this.html = '<table id="' + this.id + '-table" class="table-tag-table">' + this.getHeaderHtml(this) + '</table>';
	},
	/**
	 * 单元格被点击时，执行的回调函数。
	 * 
	 * 参数 _this：指 Panel 本身
	 * 参数 cell ：指单元格所在的 Dom（td）
	 */
	cellClickCallback : function(_this, cell) { },
	/**
	 * private
	 * 获取表示列宽的 CSS 文本。
	 */
	getColWidthStyleText: function(width)
	{
		var w = 'width: ';
		if(width == undefined || width == '*') w += '*;';
		else if(width == 'auto') w += 'auto;';