1. #11
    Ext JS Premium Member
    Join Date
    Oct 2007
    Location
    Herndon, VA
    Posts
    265
    Vote Rating
    3
    durlabh is on a distinguished road

      0  

    Default


    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

    Code:
    {
       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!

  2. #12
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #13
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I think this should have the effect we are after:

    Code:
    // 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:

    Code:
    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;

  4. #14
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


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



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

  5. #15
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    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

  6. #16
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    608
    Vote Rating
    1
    mdissel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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!!

  7. #17
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  8. #18
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by Animal View Post
    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.

  9. #19
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  10. #20
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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