Results 1 to 6 of 6

Thread: [CLOSED-774] FormPanel content does not care about fbar?

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    93
    Vote Rating
    0
      0  

    Default [CLOSED-774] FormPanel content does not care about fbar?

    n/a

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Please try to follow the bug forum guidelines: http://www.extjs.com/forum/showthread.php?t=71015

    For this issue, what version of Ext are you using?

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    The problem is that the FormLayout (AnchorLayout by extension) is not really built to handle sizing of subcontainers well (a tabpanel in your case). The way to handle this would be to use a vbox, put the top two fields in a container (simple div) and they can use a form layout as normal. Then flex the TabPanel below and this should fill the remaining space properly. Tested this under 3.1.1 and 3.2-rc.

    Code:
    MyWindowUi = Ext.extend(Ext.Window, {
            title: 'My Window',
            width: 604,
            height: 383,
            layout: 'fit',
            initComponent: function() {
                this.items = [
                    {
                        xtype: 'form',
                        title: 'My Form',
                        layout: 'vbox',
                        layoutConfig: {
                            align: 'stretch'
                        },
                        frame: true,
                        items: [
                            {
                                xtype: 'container',
                                labelWidth: 100,
                                labelAlign: 'left',
                                layout: 'form',
                                items: [{
                                    xtype: 'textfield',
                                    fieldLabel: 'Label',
                                    anchor: '100%'
                                }, {
                                    xtype: 'textfield',
                                    fieldLabel: 'Label',
                                    anchor: '100%'
                                }]
                            },
                            {
                                xtype: 'tabpanel',
                                flex: 1,
                                activeTab: 0,
                                tbar: {
                                    xtype: 'toolbar',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Top Button'
                                        }
                                    ]
                                },
                                bbar: {
                                    xtype: 'toolbar',
                                    items: [
                                        {
                                            xtype: 'button',
                                            text: 'Bottom Button'
                                        }
                                    ]
                                },
                                items: [
                                    {
                                        xtype: 'panel',
                                        title: 'Tab 1'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: 'Tab 2'
                                    },
                                    {
                                        xtype: 'panel',
                                        title: 'Tab 3'
                                    }
                                ]
                            }
                        ]
                    }
                ];
                this.fbar = {
                    xtype: 'toolbar',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Save'
                        },
                        {
                            xtype: 'button',
                            text: 'Cancel'
                        }
                    ]
                };
                MyWindowUi.superclass.initComponent.call(this);
            }
        });

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  

    Default

    You can do both of those, both the flex and set the layout config options.
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    18,593
    Vote Rating
    874
      0  
    Evan Trimboli
    Twitter - @evantrimboli

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
      0  

    Default

    Theis was closed because the form layout is doing what it was designed to do. The anchors you set are relative to the entire container, not to what is remaining in that container. Your anchor: '100% 100%' setting for the tabpanel means the height of that component fills 100% of the container's entire width and height, not 100% of what remains available at the time the anchor is set.

    I'll get an item opened for the designer team to look at the flex for vbox, sounds like an issue there.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •