日期:2014-05-16  浏览次数:20373 次

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 {