Success! Looks like we've fixed this one. According to our records the fix was applied for EXTGWT-2773 in 3.0.6.
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    unconsionable is on a distinguished road

      0  

    Default Bugs with ButtonBar in GXT ContentPanel, GXT FramedPanel (gxt-3.0.1)

    Bugs with ButtonBar in GXT ContentPanel, GXT FramedPanel (gxt-3.0.1)


    When I put ContentPanel to ContentPanel and ButtonBar contains Buttons I have incorrect position of ui components. FramedPanel has the same behavior.

    Example Code for first image:
    Code:
    <container:SimpleContainer ui:field="topContainer" pixelSize="400, 300" borders="true">
                
                <gxt:FramedPanel>
                    <gxt:FramedPanel>
                        <gxt:FramedPanel>
                            
                        </gxt:FramedPanel>
                        
                        <gxt:button>
                            <button:TextButton text="1" />
                        </gxt:button>
                    </gxt:FramedPanel>
                    
                    <gxt:button>
                        <button:TextButton text="1" />
                    </gxt:button>
                    
                </gxt:FramedPanel>
                
            </container:SimpleContainer>

    parent(button).child(button).child(empty).jpgparent(button).child(empty).child(button).pngparent(button).child(empty).child(empty).jpgparent(button).child(empty).pngparent(empty).child(button).png

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Can you post the complete file required to run this? At least the outer tags and decls of the ui.xml is missing. I can make up a fake java class to run this, but I'm assuming then that this will show your bug with no other changes.

    Some of your samples have three panels and one button, some have three panels and two buttons - why so many screenshots, and why does some completely fail to match the code sample? I agree, it looks like there is a bug here, but without being certain of what you are after, it is hard to try to fix it.

    Is there a reason you are using the GWT TextButton class instead of the GXT TextButton? I am only able to spot this because the buttons in the screenshots don't look like GXT buttons.

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    unconsionable is on a distinguished road

      0  

    Default


    To reproduce bugs with ButtonBar you can add GXT TextButton or Default Button to ContentPanel or FramedPanel. On the previous images I added GWT Buttons but it's doesn't metter.

    Example:

    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.uibinder.client.UiBinder;
    import com.google.gwt.user.client.ui.Composite;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    
    
    public class TestBinder extends Composite implements EntryPoint {
    
    
    	private static TestBinderUiBinder uiBinder = GWT
    			.create(TestBinderUiBinder.class);
    
    
    	interface TestBinderUiBinder extends UiBinder<Widget, TestBinder> {
    	}
    
    
    	public TestBinder() {
    		initWidget(uiBinder.createAndBindUi(this));
    	}
    
    
    	@Override
    	public void onModuleLoad() {
    		RootPanel.get().add(new TestBinder());
    	}
    }
    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" >
    
    
        <container:SimpleContainer
            borders="true"
            pixelSize="400, 300"
            ui:field="topContainer" >
    
    
            <gxt:FramedPanel>
    
    
                <gxt:FramedPanel>
    
    
                    <gxt:FramedPanel/>
    
    
                    <gxt:button>
                        <button:TextButton text="1" />
                    </gxt:button>
                    
                </gxt:FramedPanel>
    
    
                <gxt:button>
                    <button:TextButton text="1" />
                </gxt:button>
                
            </gxt:FramedPanel>
        </container:SimpleContainer>
    
    
    </ui:UiBinder>
    Untitled.png

    Another example. UI Binder code:

    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" >
    
    
        <container:SimpleContainer
            borders="true"
            pixelSize="400, 300"
            ui:field="topContainer" >
    
    
            <gxt:FramedPanel>
                <gxt:FramedPanel>
                    <gxt:FramedPanel>
                        <gxt:FramedPanel>
                            <gxt:button>
                        		<button:TextButton text="1" />
                    		</gxt:button>
    					</gxt:FramedPanel>
    				</gxt:FramedPanel>
                </gxt:FramedPanel>
            </gxt:FramedPanel>
        </container:SimpleContainer>
    
    
    </ui:UiBinder>
    2.png

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Thanks - I can confirm that this is a bug in 3.0.1 up until current (3.0.3). We'll update this with any workaround or when a fix is available.

    That said, for my own curiosity, what is the use case of nesting panels like this?

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    unconsionable is on a distinguished road

      0  

    Default


    On my project I have border layout. On west zone top component is ContentPanel - we need colapsable element to hide west zone. In ContentPanel child component is AccordionLayoutContainer and I can put to him only ContentPanel or FramedPanel. I added ContentPanel with Buttons to AccordionLayoutContainer and it worked fine until I changed the west zone size because when I worked with Accordion I resize only child ContentPanel and parent do not resize.

    You can try next code. Resize west zone size when you open ContentPanel with buttons or without buttons. :
    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" >
    
    
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="outerData" />
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="centerData" />
     
      	<ui:with
    		type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    		field="westData">
    		<ui:attributes minSize="300"
    			xmlns:npui="urn:import:com.gwtplatform.samples.nested.client.ui"
    			size="300" collapsible="true" split="true" margins="{westMargins}" />
    	</ui:with>
    	
    	<ui:with type="com.sencha.gxt.core.client.util.Margins" field="westMargins">
    		<ui:attributes top="0" right="5" bottom="5" left="5" />
    	</ui:with>
    	
    	<container:SimpleContainer pixelSize="1024, 768">
    		<container:child layoutData="{outerData}">
    			<container:BorderLayoutContainer borders="true">
    				<container:west layoutData="{westData}">
    					<gxt:ContentPanel deferHeight="false">
                  
    						<container:AccordionLayoutContainer expandMode="SINGLE_FILL">
     
    							<gxt:ContentPanel  animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel without button">
    								<g:Label text="1" />
    							</gxt:ContentPanel>
     
    							<gxt:ContentPanel animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel with button">
    								<g:Label text="3" />
    								<gxt:button>
    									<button:TextButton text="3" />
    								</gxt:button>
    							</gxt:ContentPanel>
     
    						</container:AccordionLayoutContainer>
                  
    					</gxt:ContentPanel>
    				</container:west>
    				<container:center layoutData="{centerData}">
    					<gxt:ContentPanel headingText="BorderLayout UiBinder Example" resize="false">
    					</gxt:ContentPanel>
    				</container:center>
    			</container:BorderLayoutContainer>
    		</container:child>
    	</container:SimpleContainer>
        
    </ui:UiBinder>
    You say me: "Everything works fine. Do not have any problems.". All working good because on the top ContentPanel first child is ContentPanel without buttons. You can add to Top ContentPanel button and you see incorrect position of button:

    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" >
    
    
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="outerData" />
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="centerData" />
     
      	<ui:with
    		type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    		field="westData">
    		<ui:attributes minSize="300"
    			xmlns:npui="urn:import:com.gwtplatform.samples.nested.client.ui"
    			size="300" collapsible="true" split="true" margins="{westMargins}" />
    	</ui:with>
    	
    	<ui:with type="com.sencha.gxt.core.client.util.Margins" field="westMargins">
    		<ui:attributes top="0" right="5" bottom="5" left="5" />
    	</ui:with>
    	
    	<container:SimpleContainer pixelSize="1024, 768">
    		<container:child layoutData="{outerData}">
    			<container:BorderLayoutContainer borders="true">
    				<container:west layoutData="{westData}">
    					<gxt:ContentPanel deferHeight="false">
                  
    						<container:AccordionLayoutContainer expandMode="SINGLE_FILL">
     
    							<gxt:ContentPanel  animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel without button">
    								<g:Label text="1" />
    							</gxt:ContentPanel>
     
    							<gxt:ContentPanel animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel with button">
    								<g:Label text="3" />
    								<gxt:button>
    									<button:TextButton text="3" />
    								</gxt:button>
    							</gxt:ContentPanel>
     
    						</container:AccordionLayoutContainer>
                  
    						<gxt:button>
    							<button:TextButton text="Top content panel button" />
    						</gxt:button>
    					</gxt:ContentPanel>
    				</container:west>
    				<container:center layoutData="{centerData}">
    					<gxt:ContentPanel headingText="BorderLayout UiBinder Example" resize="false">
    					</gxt:ContentPanel>
    				</container:center>
    			</container:BorderLayoutContainer>
    		</container:child>
    	</container:SimpleContainer>
        
    </ui:UiBinder>
    And the last test is add button to first child. Try to resize west side zone when you show ContentPanel with buttons or without:

    Code:
    <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
    
    
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container" >
    
    
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="outerData" />
      	<ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="centerData" />
     
      	<ui:with
    		type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData"
    		field="westData">
    		<ui:attributes minSize="300"
    			xmlns:npui="urn:import:com.gwtplatform.samples.nested.client.ui"
    			size="300" collapsible="true" split="true" margins="{westMargins}" />
    	</ui:with>
    	
    	<ui:with type="com.sencha.gxt.core.client.util.Margins" field="westMargins">
    		<ui:attributes top="0" right="5" bottom="5" left="5" />
    	</ui:with>
    	
    	<container:SimpleContainer pixelSize="1024, 768">
    		<container:child layoutData="{outerData}">
    			<container:BorderLayoutContainer borders="true">
    				<container:west layoutData="{westData}">
    					<gxt:ContentPanel deferHeight="false">
                  
    						<container:AccordionLayoutContainer expandMode="SINGLE_FILL">
     
    						    <gxt:ContentPanel animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel with button">
    								<g:Label text="3" />
    								<gxt:button>
    									<button:TextButton text="3" />
    								</gxt:button>
    							</gxt:ContentPanel>
    							
    							<gxt:ContentPanel  animCollapse="false" bodyStyleName="pad-text" headingText="ContentPanel without button">
    								<g:Label text="1" />
    							</gxt:ContentPanel>
     
    						</container:AccordionLayoutContainer>
    					</gxt:ContentPanel>
    				</container:west>
    				<container:center layoutData="{centerData}">
    					<gxt:ContentPanel headingText="BorderLayout UiBinder Example" resize="false">
    					</gxt:ContentPanel>
    				</container:center>
    			</container:BorderLayoutContainer>
    		</container:child>
    	</container:SimpleContainer>
        
    </ui:UiBinder>
    Also you can not add button to ContentPanel. To reproduce this bugs we need:

    Code:
    ContentPanel parent = new ContentPanel();
    ContentPanel child = new ContentPanel();
    сhild.getButtonBar().setHeight(100);
    child.getButtonBar().setVisible(true);
    parent.add(child);

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    25
    Vote Rating
    0
    Cloudgatherer is on a distinguished road

      0  

    Default


    Is there any workaround to this issue? I'm currently experiencing similar problems regarding nested ContentPanels, the ButtonBar area seems to be causing issues with respect to sizing/scrolling similar to what has already been described above.

    In my case, I have a ContentPanel with simple Save/Cancel buttons. Within this ContentPanel is a BorderLayout, with one ContentPanel in the north, a second ContentPanel in the center. When either inner panel needs to scroll, they seem to assume the ButtonBar area is available, when in fact it is covered up. This is causing the "down" scroll arrow to be hidden in the space the ButtonBar would be. Resizing the browser window fixes the scrolling/layout issue, but then the outer ContentPanel loses its Save/Cancel buttons (they disappear).

    Thanks.

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    19
    Vote Rating
    0
    p33t is on a distinguished road

      0  

    Default Awaiting work-around / confirmation of bug fix

    Awaiting work-around / confirmation of bug fix


    Hi,

    I'm experiencing this same issue. In my case I'm manually building up a Content Panel nested inside of 3 border layouts.

    Are there any work around for this? Has the bug been fixed for the next revision?

    Thanks in advance.
    Last edited by p33t; 1 Apr 2013 at 6:08 PM. Reason: Remove debris

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    19
    Vote Rating
    0
    p33t is on a distinguished road

      0  

    Default My Bad - VerticalLayoutData used incorrectly

    My Bad - VerticalLayoutData used incorrectly


    FWIW, it turns out my issues stem from trying to get the last field in a form to flex and fill up remaining space. I was specifying '-1' in VerticalLayoutData.height thinking it was like a 'flex' value but is actually the full container height.

    The solution is to determine the amount of space used by the other widgets and supply that as a negative value.

    EG: This indicates full width and full height less 3 fields.
    Code:
    ...
     new VerticalLayoutData(1, -3 * STD_FIELD_HEIGHT)
    ...
    Which causes the flex I was after.

    Also, STD_FIELD_HEIGHT = 29 seems to work for me.

  9. #9
    Sencha - GXT Dev Team
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    487
    Vote Rating
    15
    branflake2267 will become famous soon enough

      0  

    Default


    We've fixed the bug and is ready for the 3.0.6 release which is coming up shortly.

    Brandon

  10. #10
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,734
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    The -1 value means to ask the child widget how much room it needs, not to assign it a size directly. This only works for widgets that can decide size for themselves - not VLC, HLC, or Grid, for example. In contrast, 1.0 means to use 100% of the available space - any value between 0 and 1 means use that amount as a percentage.

    Negative values other than -1 (like your -3 * 29 = -87) are rarely used, but they mean to take the total width and use all of it except for the indicated amount. This mean is the parent is 300px tall, the object you are adding will be 213 px tall. I almost always find it to be easier to just add the other children with specific sizes, then use 1.0 to use the rest.

    (Also, as noted in the heading, this is now fixed in SVN and our nightly builds, and will go out in 3.0.6)