Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jan 2010
    Posts
    26
    Vote Rating
    0
    Ranma13 is on a distinguished road

      0  

    Default [CLOSED]Collapsible panel in border layout hides form fields on re-show

    [CLOSED]Collapsible panel in border layout hides form fields on re-show


    Ext version tested:
    • Ext 3.2.0 Release
    • Ext 3.2.0 Beta

    Adapter used:
    • ext


    css used:
    • only default ext-all.css


    Browser versions tested against:
    • IE8
    • FF3.6.3


    Operating System:
    • Windows 7 64-bit


    Description:
    • Collapsing a panel that has a FormPanel in a specific layout refuses to show the form fields on re-show (although the buttons in the FormPanel still show). This issue only occurs on Firefox 3.6.3. It behaves correctly on IE8. It also behaves correctly with ExtJS 3.2.0 beta, but not with 3.2.0 release.

    Test Case:

    This code is directly executable in Firebug, assuming that all the necessary Javascript includes are provided. The layout is two panels, a center panel and a side panel for filtering. These two panels are then put into a wrapper panel, and the wrapper panel is put into a card panel as one of the cards. Then the card panel is rendered to the screen as a viewport item.

    Code:
    // center panel, main content
    var centerPanel = new Ext.Panel({
        region: 'center',    
        title: 'Center Panel',
        html: 'Test'
    });
    
    // left panel, for filtering
    var leftPanel = new Ext.Panel({
        region: 'west',
        width: 250,
        collapsible: true,
        title: 'Left Panel',
    
        items:
        [
            // form that handles filtering, this is a separate panel inside the side panel because I
            // need the buttons right below the form fields instead of at the bottom of the page
            {
                xtype: 'form',
                defaultType: 'textfield',
                items:
                [
                    { fieldLabel: 'Filter 1' },
                    { fieldLabel: 'Filter 2' },
                    { fieldLabel: 'Filter 3' }
                ],
    
                buttons:
                [
                    { text: 'Filter' },
                    { text: 'Clear' }
                ]
            }
        ]
    });
    
    // panel that wraps the center panel and filter panel
    var mainPanel = new Ext.Panel({
        region: 'center',
        layout: 'border',
        items: [ centerPanel, leftPanel ]
    });
    
    // card panel that contains the main panel, normally this would have more panels in it
    var cardPanel = new Ext.Panel({
        region: 'center',
        layout: { type: 'card', deferredRender: true },
        activeItem: mainPanel.getId(),
        items: [ mainPanel ]
    });
    
    // show a viewport that only has the card panel in it
    new Ext.Viewport({
        layout: 'border',
        items: [ mainPanel ]
    });
    Steps to reproduce the problem:

    Run the above code in Firebug, assuming all the required ExtJS files are provided. Collapse the side panel. Re-open the side panel. Notice how the form fields disappear, but the buttons are shown.

    The result that was expected:

    The form fields should re-appear, just like how it appears before it was collapsed.

    The result that occurs instead:

    The form fields disappear when the panel is uncollapsed.

    Screenshot or Video:

    See attached file.

    Debugging already done:

    Firebug does not report any errors. No further debugging done.
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,170
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The west region has no layout, which means the form isn't having it's size managed. You need to either:

    a) Give it a height
    b) Have the west region use a layout that will set the size
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jan 2010
    Posts
    26
    Vote Rating
    0
    Ranma13 is on a distinguished road

      0  

    Default


    Thanks, setting a layout on the panel did the trick.

Thread Participants: 1