extjs扩展之DynamicTableFormLayout

使用ext的布局，当表单字段很多，有时候需要用到table的布局，仅仅table的布局还不能满足要求，比如说要显示fieldLabel，这时要使用form布局，当然，可以采用table中嵌套的方式来使用form布局，不过这样使用起来代码多，比较不方便，于是到处逛逛，在extjs的论坛中，找到了国外一哥们写的扩展TableFormLayout，使两种布局结合起来用，table中直接放textfield，这样也能满足一般的要求了，但是，有一种需求，比如说，我要动态添加行，这个时候该怎么办呢？
于是来修改TableFormLayout的代码，新增一些方法：

Ext.override(Ext.layout.FormLayout, {
    fieldTpl: (function() {
        var t = new Ext.Template(
            '',
                '{1}{4}',
                '',
                '',
            ''
        );
        t.disableFormats = true;
        return t.compile();
    })()
});

/**
 * Table form layout
 **/
Ext.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
    setContainer : function(ct){
        Ext.layout.TableFormLayout.superclass.setContainer.call(this, ct);
        if(ct.labelAlign){
            ct.addClass('x-form-label-'+ct.labelAlign);
        }

        if(ct.hideLabels){
            this.labelStyle = "display:none";
            this.elementStyle = "padding-left:0;";
            this.labelAdjust = 0;
        }else{
            this.labelSeparator = ct.labelSeparator || this.labelSeparator;
            ct.labelWidth = ct.labelWidth || 100;
            if(typeof ct.labelWidth == 'number'){
                var pad = (typeof ct.labelPad == 'number' ? ct.labelPad : 5);
                this.labelAdjust = ct.labelWidth+pad;
                this.labelStyle = "width:"+ct.labelWidth+"px;";
                this.elementStyle = "padding-left:"+(ct.labelWidth+pad)+'px';
            }
            if(ct.labelAlign == 'top'){
                this.labelStyle = "width:auto;";
                this.labelAdjust = 0;
                this.elementStyle = "padding-left:0;";
            }
        }
    },

    fieldTpl: Ext.layout.FormLayout.prototype.fieldTpl,

    renderItem : function(c, position, target) {
        if (c && !c.rendered) {
            Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, Ext.get(this.getNextCell(c)));
        }
    },

   getRow : function(index){
        var row = this.table.tBodies[0].childNodes[index];
        if(!row){
            row = this.createRow();
            this.table.tBodies[0].appendChild(row);
        }
        return row;
    },
    
    createCell:function(colspan,rowspan,cellCls){
     var cls = 'x-table-layout-cell';
     var td = document.createElement('td');
     if(colspan){
   td.colSpan = colspan;
  }
  if(rowspan){
   td.rowSpan = colspan;
  }
  if(cellCls){
   cls += ' ' + c.cellCls;
  }
  td.className = cls;
  return td;
    },
    
    createRow:function(){
     var row=document.createElement('tr');
        row.className="x-table-row";
        return row;
    },
    
   insertRow:function(index,items){
    	var oldTr = Ext.get(this.table.tBodies[0].childNodes[index]);
    	var newTr = Ext.get(this.createRow());
    	newTr.insertAfter(oldTr);
    	if(items&&items.length&&items.length>0){
    		for(var i=0,j=items.length;i<j;i++){
    			var t=items[i]; 
    			var td = this.createCell(t.colspan,t.rowspan,t.cellCls);
    			newTr.appendChild(td);    			
    			Ext.layout.FormLayout.prototype.renderItem.call(this, t, 0, Ext.get(td));
    		}
    	}   	
    }
});
Ext.Container.LAYOUTS['tableform'] = Ext.layout.TableFormLayout;

以上代码能满足动态添加行的需要，当然，这只是抛砖引玉，大家还可以添加动态删除行的功能等等