Layout Failure for Collapsed Fieldsets

**suzuki1100nz** · 26 Mar 2012 1:43 AM

Hi,

We have upgrade to 4.1 RC 2 and are testing our current website.
Have found a minor issue with window display in a border layout where the window width and height configs are not explicitly set (if they are set the issue doesn't occur).
Window is displayed from a button click event and is renderedTo the centre panel.

Issue at this stage only occurs when there is a nested field set within the window being displayed.

When the window displays the title bar and title bar controls are missing. They only appear with a resize of the window or expanding the collapsed field-set with the window.

Would you like a bug report? (I appreciate your very busy)

windowDisplayIssue.jpg

**terrycursh** · 26 Mar 2012 4:02 AM

where to get RC2

**skirtle** · 26 Mar 2012 4:18 AM

RC2 has not yet been released. I assume you're referring to a nightly build? If so, it'd be very helpful if you could include the date-stamp of the build when you're reporting problems.

If you're testing with nightly builds then you should expect some problems, those builds have not yet cleared the QA process and could still contain serious bugs. That said, if the problem persists for a few days then it's a good idea to file a bug report.

If you post some code here to reproduce your issue then it should be pretty easy to confirm whether you've found a bug or whether there's a problem with your code. If it's a bug I'll move this thread to the bugs forum to save you having to report it again.

**suzuki1100nz** · 26 Mar 2012 12:33 PM

My first attempt at a debug post so apologies if its messy or not correct.

REQUIRED INFORMATION

Ext version tested:

Ext 4.1.0 RC2 nightly build 23 March 2012

Browser versions tested against:

Chrome 18.0.1025.137 beta-m
IE9
FF 10.0.2

Description:

Display a window in a container fails to render correctly. Window title bar and controls missing. Re-sizing the window causes the bar to appear. Issue only occurs if the window width and height config are not set. Appears to be related to the window control contents where a field set is nested within a field set. See code sample

Steps to reproduce the problem:

Use code reproducer below. Click button to add the window

The result that was expected:

Window should display centered in the container and auto sized

The result that occurs instead:

Window displays top left with title bar missing and not sized

Test Case:

Code:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all-debug.js" charset="UTF-8"></script>
<script language="javascript"  type="text/javascript" charset="UTF-8">
Ext.namespace("Greentree.Utilities");
Greentree.Utilities.initialLoad = function(){var viewport = new Ext.Viewport({
 border: false, 
 layout: "border",  
 items: [{
    xtype: "container", 
    id: "centerContainer", 
    layout: "anchor", 
    region: "center"}, 
    {
    xtype: "panel", 
    region: "east", 
    title: "EAST", 
    width: 300,  
    items: [{
    xtype: "button", 
    margin: "10 0 0 10", 
    text: "Display Window", 
    listeners: {
      click: function() { 
      Ext.create('Ext.window.Window', {
                autoScroll : true,
                 collapsible : true,
                            resizable : true,
                            constrain : true,
                            layout : "anchor",
                            renderTo : "centerContainer",
                            title : "Test Window",
                            xtype : "window",
                            items : [{
                                xtype : "fieldset",
                                margin : 10,
                                padding : 10,
                                items : [{
                                        xtype : "textfield",
                                        anchor : "30%",
                                        fieldLabel : "Code"
                                        }, {
                                            xtype : "textfield",
                                            fieldLabel : "Name",
                                            minWidth : 40
                                        } , {
                             xtype : "fieldset",
                             collapsed : true,
                             collapsible : true,
                             margin : 10,
                             padding : 5,
                             title : "Details",
                            items : [{
                            border : false,
                            layout : "anchor",
                             xtype : "container",
                            items : [{
                           xtype : "textfield",
                           anchor : "70%",
                           fieldLabel : "",
                           hideEmptyLabel : false,
                           margin : 10
                          }]
                       }]
                     }]
                  }]
             }).show();}
          }
       }]
    }
    ]}); 
    viewport.show(); 
};
Ext.onReady(Greentree.Utilities.initialLoad);
</script>
</head><body></body></html>

HELPFUL INFORMATION

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

Win 7

**skirtle** · 26 Mar 2012 12:59 PM

A couple of forum tips.

The forum allows you to edit your post after you've posted it. I've gone through and de-mangled your post for you, if you have problems like this again please edit it yourself so that others can read it easily. I highly recommend clicking the A/A button in the top-left corner of the editor so that you can see your posts as markup rather than the half-baked attempt at a WYSIWYG editor that the forum shows you by default.

Please don't attach ZIPs to threads. Post the relevant code inline in the thread, making sure it is nicely formatted and wrapped in [CODE] tags. If you attach a ZIP then your thread will almost always be ignored.

**suzuki1100nz** · 26 Mar 2012 1:14 PM

Ok thanks for the tips. When can you legitimately use the file attach feature? or is it simply a no no for bug reporting

**skirtle** · 26 Mar 2012 1:23 PM

There's no official rules saying you can't use attachments, just in practice you'll find that threads with file attachments get ignored.

In the specific case of bug reports, you're ideally looking to provide a complete, minimal test case. I've never yet come across a test case that was genuinely minimal and yet was complicated enough to justify attaching it as a ZIP.

If you post your code for this window issue to the thread I'll take a look at it for you, see whether it's a bug.

**suzuki1100nz** · 26 Mar 2012 1:50 PM

ok. Test case provided inline zip file removed.
Thanks

**skirtle** · 27 Mar 2012 5:10 AM

I'm going to move this thread to the bugs forum. I'm also going to change the title so that it doesn't mention RC2 any more, as that could cause confusion.

I've reduced your test case down a little:

Code:

Ext.widget({
    autoShow: true,
    title: 'Test Window',
    xtype: 'window',
    items: [{
        xtype: 'fieldset',
        //collapsed: true,
        collapsible: true,
        title: 'Details',
        items: [{
            height: 100,
            width: 100
        }]
    }]
});

Notes:

Collapsing the fieldset causes a layout failure.
Specifying layouts (e.g. fit) on the window/fieldset doesn't help.
Switching the fieldset to a panel works fine.

Layout Failure for Collapsed Fieldsets

Thread Tools

Search Thread

Display

Layout Failure for Collapsed Fieldsets

Layout Failure for Collapsed Fieldsets