ExtJS3.2 已经有了tableform布局(bug fix)

(最新修改：覆盖renderAll方法，使得hidden类型的控件不布局）

通过不懈的google，终于还是在Extjs上找到了tableform 布局的代码，这可以终结网上大部分通过hbox,或者column来布局form 的代码例子了。


   先看一个例子
  
var form = new Ext.form.FormPanel({
renderTo:'content',
layout:'tableform',
width:600,
frame:true,
title:'test',
layoutConfig: { columns: 2 },
                    items: [
                        { fieldLabel: 'Created By:', xtype: 'textfield'
                        },
                        { fieldLabel: 'Author:', xtype: 'textfield'
                        },
                      
                        { fieldLabel: 'Creation Date:', xtype: 'datefield' },
                        { fieldLabel: 'to', xtype: 'datefield' },
                        { fieldLabel: 'Modified By', xtype: 'textfield',colspan: 2},
                        { fieldLabel: 'Modified Date:', xtype: 'datefield' },
                        { fieldLabel: 'to', xtype: 'datefield' },
                    


})

   

tableform的好处是你可以一直增加表单还不用考虑布局。这个有点类似我8年前swing布局中写的一个布局管理器
代码如下，也可以在此链接找到最新更新：http://www.sencha.com/forum/showthread.php?59897-Ext.layout.TableFormLayout-%28v2%29/page3

Ext.namespace("Ext.ux.layout");

Ext.ux.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
    monitorResize: true,
    setContainer: function() {
        Ext.layout.FormLayout.prototype.setContainer.apply(this, arguments);
        this.currentRow = 0;
        this.currentColumn = 0;
        this.cells = [];
    },
    renderItem : function(c, position, target) {
        if (c && !c.rendered) {
            var cell = Ext.get(this.getNextCell(c));
            cell.addClass("x-table-layout-column-" + this.currentColumn);
            Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, cell);
        }
    },
    getLayoutTargetSize : Ext.layout.AnchorLayout.prototype.getLayoutTargetSize,
    getTemplateArgs : Ext.layout.FormLayout.prototype.getTemplateArgs,
    onLayout : function(ct, target) {
        Ext.ux.layout.TableFormLayout.superclass.onLayout.call(this, ct, target);
        if (!target.hasClass("x-table-form-layout-ct")) {
            target.addClass("x-table-form-layout-ct");
        }
        var viewSize = this.getLayoutTargetSize(ct, target);
        var aw, ah;
        if (ct.anchorSize) {
            if (typeof ct.anchorSize == "number") {
                aw = ct.anchorSize;
            } else {
                aw = ct.anchorSize.width;
                ah = ct.anchorSize.height;
            }
        } else {
            aw = ct.initialConfig.width;
            ah = ct.initialConfig.height;
        }

        var cs = this.getRenderedItems(ct), len = cs.length, i, c, a, cw, ch, el, vs, boxes = [];
        var x, w, h, col, colWidth, offset;
        for (i = 0; i < len; i++) {
            c = cs[i];
            
            // get table cell
            x = c.getEl().parent(".x-table-layout-cell");
            if (this.columnWidths) {
                // get column
                col = parseInt(x.dom.className.replace(/.*x\-table\-layout\-column\-([\d]+).*/, "$1"));
                // get cell width (based on column widths)
                colWidth = 0, offset = 0;
                for (j = col; j < (col + (c.colspan || 1)); j++) {
                    colWidth += this.columnWidths[j];
                    offset += 10;
                }
                w = (viewSize.width * colWidth) - offset;
            } else {
                // get cell width
                w = (viewSize.width / this.columns) * (c.colspan || 1);
            }
            // set table cell width
            x.setWidth(w);
            // get cell width (-10 for spacing between cells) & height to be base width of anchored component
            w = w - 10;
            h = x.getHeight();
            // If a child container item has no anchor and no specific width, set the child to the default anchor size
            if (!c.anchor && c.items && !Ext.isNumber(c.width) && !(Ext.isIE6 && Ext.isStrict)){
                c.anchor = this.defaultAnchor;
            }

            if(c.anchor){
                a = c.anchorSpec;
                if(!a){ // cache all anchor values
                    vs = c.anchor.split(' ');
                    c.anchorSpec = a = {
                        right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
                        bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
                    };
                }
                cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined;
                ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;

                if(cw || ch){
                    boxes.push({
                        comp: c,
                        width: cw || undefined,
                        height: ch || undefined
                    });
                }
            }
        }      
        for (i = 0, len = boxes.length; i < len; i++) {
            c = boxes[i];
            c.comp.setSize(c.width, c.height);
        }      
    },
    
    parseAnchor : function(a, start, cstart) {
        if (a && a != "none") {
            var last;
            if (/^(r|right|b|bottom)$/i.test(a)) {
                var diff = cstart - start;
                return function(v) {
                    if (v !== last) {
                        last = v;
                        return v - diff;
                    }
                };
            } else if (a.indexOf("%") != -1) {
                var ratio = parseFloat(a.replace("%", "")) * .01;
                return function(v) {
                    if (v !== last) {
                        last = v;
                        return Math.floor(v * ratio);
                    }
                };
            } else {
                a = parseInt(a, 10);
                if (!isNaN(a)) {
                    return function(v) {
                        if (v !== last) {
                            last = v;
                            return v + a;
                        }
                    };
                }
            }
        }
        return false;
    },
    
    renderAll : function(ct, target){
        var items = ct.items.items, i, c, len = items.length;
        for(i = 0; i < len; i++) {
            c = items[i];
            if(c.xtype=="hidden"){
                continue;
            }
            if(c && (!c.rendered || !this.isValidParent(c, target))){
                this.renderItem(c, i, target);
            }
        }
    },
    
    

    adjustWidthAnchor : function(value, comp) {
        return value - (comp.isFormField ? (comp.hideLabel ? 0 : this.labelAdjust) : 0);
    },
    adjustHeightAnchor : function(value, comp) {
        return value;
    },
    // private
    isValidParent : function(c, target){
    	return c.getPositionEl().up('table', 6).dom.parentNode === (target.dom || target);
    },
    getLabelStyle : Ext.layout.FormLayout.prototype.getLabelStyle,
    labelSeparator : Ext.layout.FormLayout.prototype.labelSeparator,
    trackLabels: Ext.layout.FormLayout.prototype.trackLabels
});
Ext.Container.LAYOUTS['tableform'] = Ext.ux.layout.TableFormLayout;

code]




  


  

    
    
分享到：
      
      
    
  

  

    

      EXT 可以这么使用
      |
      注释脚本（comment script）
    
  
  

    

      
2010-07-27 18:02
      
浏览 4404
      
评论(3)
      
      
      
分类:Web前端
      
      
查看更多
    
    
  
    
  

    
评论
    
    

  

    3 楼
    kingxunxun
    2013-05-23  
    
    
  
  
有个小问题 这样的方式hidden的表单是不渲染了 但是hidden的值也是传不到后台了
测试一下吧。



  

    2 楼
    qingtianxl
    2011-01-19  
    
    
  
  
本人试用下3.3版本的 tableform  发现一个小bug

当试用panel当做面板装载 form时  xtype=hidden的控件能被隐藏掉  但是当用window弹出窗口装载 form时  会报错：

this.getLayoutTargetSize is not a function

[在此错误处中断] var viewSize = this.getLayoutTargetSize(ct, target);

错误出现再 26行出    

getLayoutTargetSize : Ext.layout.AnchorLayout.prototype.getLayoutTargetSize,



应该是getLayoutTargetSize 取不到值  但是我不知道这句话是什么意思  请大家帮忙解决一下  



  

    1 楼
    xietaomlzs
    2010-07-30  
    
    
  
  
呵呵，本想给你评论下，结果那么麻烦，还要我测试，搞的想说的话也不说了。