1. #1
    TheMonolith
    Guest

    Default field set with column layout

    field set with column layout


    Please take a look at the attached screenshot.

    The code looks like this:

    Code:
    {
        xtype:"fieldset",
        title:"Farbe",
        autoHeight:true,
        items:
        [{
            layout:"column",
            items:
            [{
                columnWidth:0.2,
                items:
                [{
                    xtype:"form",
                    title:"",
                    hideBorders: true,
                    items:
                    [{
                        xtype:"numberfield",
                        fieldLabel:"C",
                        border: false,
                        bodyBorder: false,
                        name:"numbervalue",
                        width:50
                    }]
                }]
            }]
        }]
    }
    There are two problems:

    1) The text field width is not 50% of the field set width. Why not? After all, I included columnWidth:0.5.

    2) Why are the borders of the inner form panel still shown? I mean seriously, I used all border-related properties and gave them values that should get rid of them.

    P.S. I have spent the last 3 hours on this...
    Attached Images

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    I never use such notation but you use a form within a fieldset?? First make a form, give it a column or table layout, than add your fieldsets.

  3. #3
    TheMonolith
    Guest

    Default


    But

    * I need one field set within a form panel
    * the field set should have several columns, hence column layout
    * but because the column layout doesn't display field labels for its components, each column must contain a form panel (because it DOES display field labels for its components)
    * and these inner form panels (in the listed example it is just one) get a text field each

    It is the only way I have found so far that might to what I want it to do.
    But if I have misunderstood your explanation, please correct me.

  4. #4
    TheMonolith
    Guest

    Default


    Can somebody help me?

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


    That's not a FieldSet with a column layout though is it now?

    Read it.

    It's Fieldset with no layout (And the docs tell you what that means) which contains a Panel which uses column layout.

  6. #6
    TheMonolith
    Guest

    Default


    Okay, based on your suggestions I managed to simplify the code:

    Code:
    {
        xtype:"fieldset",
        title:"Legend",
        autoHeight:true,
        items:
        [{
            xtype:"panel",
            title:"",
            layout:"column",
            items:
    	[{
                xtype:"form",
                title:"",
                columnWidth:0.5,
                items:
    	    [{
                    xtype:"textfield",
                    fieldLabel:"Text",
                    name:"textvalue"
                }]
            }]
        }]
    }
    Now the second problem is solved because the borders disapper when I specify "border: false".

    The first problem persists however. As you can see in the new screenshot that I have attached, the text field is much wider than the specified 20% ("columnWidth: 0.2"). Why?

    Also, why is columnWidth not listed in the API documentation of Class Ext.Panel?
    Attached Images

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


    So, what width is

    Code:
            xtype:"panel",
            title:"",
            layout:"column",
    supposed to be to calculate the 0.5 column width? Your code has ("0.5", not "0.2")

    YOU ALWAYS need to specify a layout if you want sizing.

    That is repeated over and over and over again in the docs.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


    More importantly, why do you still EMBED a column layout Panel within the FieldSet instead of making the FieldSet layout: 'column'????

  9. #9
    TheMonolith
    Guest

    Default


    Okay, I got it now. Thank you Animal. This is the final, working code:

    Code:
        {
            xtype:"fieldset",
            title:"Legend",
            autoHeight:true,
            layout:"column",
            items:
            [{
                xtype:"form",
                title:"",
                width: "50%",
                items:
                [{
                    xtype:"textfield",
                    fieldLabel:"Text",
                    name:"textvalue"
                }]
            }]
        }
    One more question: Why can I not find the columnWidth property anywhere in the API documentation? Has it been removed or renamed in Ext JS 3.x?

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      1  

    Default


    It is not a config option of any Component. It's a "hint" which is only read by the column layout class.

    http://www.extjs.com/deploy/dev/docs...t.ColumnLayout

Thread Participants: 2