Hybrid View

    You found a bug! We've classified it as EXTGWT-2773 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. 22 Jan 2013 9:10 AM #1
    unconsionable
    unconsionable is offline
    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
    Reply With Quote Reply With Quote
  2. 22 Jan 2013 1:44 PM #2
    Colin Alworth
    Colin Alworth is offline
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Posts
    1,934
    Vote Rating
    55
    Colin Alworth is a jewel in the rough Colin Alworth is a jewel in the rough Colin Alworth is a jewel in the rough
      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.
    Reply With Quote Reply With Quote
  3. 23 Jan 2013 2:40 AM #3
    unconsionable
    unconsionable is offline
    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
    Reply With Quote Reply With Quote
  4. 23 Jan 2013 10:00 AM #4
    Colin Alworth
    Colin Alworth is offline
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Posts
    1,934
    Vote Rating
    55
    Colin Alworth is a jewel in the rough Colin Alworth is a jewel in the rough Colin Alworth is a jewel in the rough
      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?
    Reply With Quote Reply With Quote
  5. 24 Jan 2013 1:58 AM #5
    unconsionable
    unconsionable is offline
    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);
    Reply With Quote Reply With Quote
  6. 5 Feb 2013 3:00 PM #6
    Cloudgatherer
    Cloudgatherer is offline
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    14
    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.
    Reply With Quote Reply With Quote
  7. 1 Apr 2013 6:08 PM #7
    p33t
    p33t is offline
    Sencha User
    Join Date
    Dec 2011
    Posts
    18
    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
    Reply With Quote Reply With Quote