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.childNodes; if(!row){ row = this.createRow(); this.table.tBodies.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.childNodes); 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; 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;
以上代码能满足动态添加行的需要，当然，这只是抛砖引玉，大家还可以添加动态删除行的功能等等
页:
[1]