GXT3.1: ContentPanel has wrong height

Required Information

Version(s) of Ext GWT

GXT 3.1

Browser versions and OS

FireFox 24.5.0 ESR on Win7 Enterprise, SP1, 64Bit

Virtual Machine

No

Description

ContentPanel has a serious Problem calculating its own height. It seems like it doesn't take its Header into consideration. Hence, all its height goes to its contentArea (i.e. child). Then the header jumps in, takes another 22px and ContentPanel is 22px larger than it should be.

But this only happens if ContentPanel gets size set with exactly the values it gets later told by its parent. If the height differs, there is a recalculation correctly done.

I think the first setting of height is to blame: it acts like heigth has been set. Therefore setting the same height later is a no-op. But height wasn't calculated correctly. Maybe because ContentPanel is not shown yet.

See example below.

Run mode

development mode

Steps to reproduce the problem

1. Start example in development mode in Eclipse


2. Open app in browser


3. Click the "click me!"

Expected result

"left2" is 200x500

(Or 200x499, since 1px gets consumed by HorizontalLayoutContainer somehow)

Actual result

"left2" is 200x522 (or 200x521, see above) and covers partly the "click me".

"left2" is larger than its parent. How is this possible?

Test case

Code:

        HorizontalLayoutContainer hlc = new HorizontalLayoutContainer();
        ContentPanel left = new ContentPanel();
        left.setHeadingText("left is 200x500. fine.");
        left.add(new Label("left content"));
        
        ContentPanel right = new ContentPanel();
        right.setHeadingText("right");
        right.add(new Label("right content"));
        
        right.addButton(new TextButton("right Button"));
        
        hlc.add(left, new HorizontalLayoutData(200, 1));
        hlc.add(right, new HorizontalLayoutData(1, 1));
        
        final HorizontalLayoutContainer hlc2 = new HorizontalLayoutContainer();
        ContentPanel left2 = new ContentPanel();
        left2.setHeadingText("left2 should be 200x500");
        left2.add(new Label("left2 content"));
        
        left2.setPixelSize(200, 500);    // EVIL!
        
        ContentPanel right2 = new ContentPanel();
        right2.setHeadingText("right2");
        right2.add(new Label("right2 content"));
        
        right2.addButton(new TextButton("right2 Button"));
        
        hlc2.add(left2, new HorizontalLayoutData(200, 1));
        hlc2.add(right2, new HorizontalLayoutData(1, 1));
        
        
        final CardLayoutContainer clc = new CardLayoutContainer();
        clc.setPixelSize(500, 500);
        Label lbl = new Label(" -- -- -- --- - -- -- -- --- -- ---- --- -- click me!  ----  ---- ----- ------ ----- ------ ");
        clc.add(hlc);
        clc.add(hlc2);
        
        lbl.addClickHandler(new ClickHandler() {
            
            @Override
            public void onClick(ClickEvent event) {
                clc.setActiveWidget(hlc2);
                
            }
        });
        
        RootPanel.get().add(clc);
        RootPanel.get().add(lbl);

Helpful Information

Debugging already done

setActiveWidget leads to a doLayout() / forceLayout() of ContentPanel. In this context there is a resizing of ContentPanel. But since the new size is the old one, no resizing happens. Thats bad, cause Header hasn't been taken into consideration yet and never will.

You should try

1. Example without the "left2.setPixelSize(200, 500); // EVIL!" line


2. Example with different size at Evil line like "left2.setPixelSize(234, 567); // EVIL!"

In both cases "left2" has the correct size of 200x500!