Ext.ux.layout.TableFormLayout

[durlabh]

Have you tried with the setContainer change I made? That works with different labelAlign options as well. You can assign labelWidth etc. as well as you would set on a form.

So, your config can be something like

{
   layout: 'tableform',
   layoutConfig: {columns: 2},
   border: 'false',
   labelWidth: 200,
   labelAlign: 'top',
   items: [
      {xtype: 'textbox', fieldLabel: 'First Name'},
      {xtype: 'textbox', fieldLabel: 'Last Name'},
      {xtype: 'textarea', fieldLabel: 'Remarks', colspan: 2}
   ]
}

Let me know what kind of issues you are encountering!

[Animal]

Yes, durlabh's solution will fix the OP's problem. It looks like the way to go.

I've posted a Feature Request that this be added to the main Ext codebase. I think that 99% of form layouts are tabular.

The vertical, linear nature of Ext.layout.FormLayout baffles first time Ext users.

[Animal]

I think this should have the effect we are after:

// Make the fieldTpl available to ALL layouts
Ext.override(Ext.layout.ContainerLayout, {
    fieldTpl: (function() {
        var t = new Ext.Template(
            '<div class="x-form-item {5}" tabIndex="-1">',
                '<label for="{0}" style="{2}" class="x-form-item-label">{1}{4}</label>',
                '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
                '</div><div class="{6}"></div>',
            '</div>'
        );
        t.disableFormats = true;
        return t.compile();
    })()
});

And the new layout class:

Ext.layout.TableFormLayout = Ext.extend(Ext.layout.TableLayout, {
    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) {
            Ext.layout.FormLayout.prototype.renderItem.call(this, c, 0, Ext.get(this.getNextCell(c)));
        }
    }
});
Ext.Container.LAYOUTS['tableform'] = Ext.layout.TableFormLayout;

[mystix]

animal, with your override from post #13 i get this error (on 2.1svn):



p.s. anyway to get anchors working with this?

[mabello]

Good tip, I have not tried the code though, but I will.
I'm wondering if the new layout need a destroy override...
The benefit of making the fieldTpl available to all layouts is because then you can use it to render fields in all the layouts...but it works only if you use the renderItem of the form layout for now...
Am I correct?

Thanks and keep up the good work

[mdissel]

Yes, durlabh's solution will fix the OP's problem. It looks like the way to go.

I've posted a Feature Request that this be added to the main Ext codebase. I think that 99% of form layouts are tabular.

The vertical, linear nature of Ext.layout.FormLayout baffles first time Ext users.

100% agreed!!

[Animal]

Mystix, I just fixed the code in the post #13.

[mystix]

Mystix, I just fixed the code in the post #13.

sweet. works great now

would you recommend a bodyStyle config to handle the lack of padding, or a form-like anchor config (which currently isn't applicable for this plugin)?

[edit]
scratch that, there's no bodyStyle config for cells.
guess writing css's the way to go.

[Animal]

The TableLayout class has the cellCls config. But I would like it to also have cellStyle.

And in the layoutConfig, tableCls and tableStyle.

I usually need to add style="width:100%" to my table layouts.

[Animal]

Actually, there is tableAttrs in SVN. I'll comment it so that we can see it.