Hybrid View

    You found a bug! We've classified it as EXTGWT-3431 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default TextButton is truncated / cut-off

    TextButton is truncated / cut-off


    Hi,

    I'd just like to report a small issue/bug with TextButton in GXT versions 3.0.0 and 3.0.1. It is not rendered entirely right (see screenshot). The bottom border of the button seems to be missing. Strangely enough, version 3.0.0-rc2 displays the button correctly but has other problems (for which I submitted a separate thread). These are related to combo box selection (JavaScript 'parent is null' error when first expanding the combo box, then clicking somewhere outside the combo box). The bug for that one was set to FIXED, but I'm still seeing it in 3.0.0-rc2.

    Anyway, here's the screenshot of the misbehaving TextButton:

    Button.png

    It's just a small issue but looks a bit sloppy I saw this problem in both Chrome and Firefox.

    Thanx!

    Ralph

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    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 share a standalone test case (something that implements EntryPoint and has no other dependencies within your project) that can reproduce this issue? Are you seeing this on http://sencha.com/examples/ ?

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default


    Hi Colin,

    Thanks for your reply. I'll see what I can do about this stand-alone testcase. In the meantime, it might be interesting for you to know that this issue seems to appear primarily inside a Portlet. Our application works a lot with them (using UiBinder). For example, we also have a login screen with a "Login" button and that one is rendered correctly....

    So it might not be the button itself but some containing widget. An example XML of our portlet UiBinder code is provided below.

    Thanks for your time. I hope I can give you more information soon.

    Greetz,

    Ralph

    Code:
    <ui:UiBinder
      xmlns:ui="urn:ui:com.google.gwt.uibinder"
      xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
      xmlns:client="urn:import:com.sencha.gxt.widget.core.client"
      xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
      xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
      xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
      xmlns:widget="urn:import:com.arcus.pba.client.shared.widget">
    
      <ui:style>
        .topSpacing { margin-top: 10px; }
        .bottomSpacing { margin-bottom: 5px; }
        .employee { font-weight: bold; font-size: 12px; }
        .newEntry { font-weight: bold; font-size: 12px; margin-bottom: 5px; 
          margin-top: 10px; }
      </ui:style>
    
      <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="fullWidth">
        <ui:attributes width="1" height="-1"/>
      </ui:with>
    
      <client:ContentPanel headingText="Timesheet" bodyBorder="false" borders="false">
          <container:PortalLayoutContainer ui:field="mPortalLayoutContainer"
          numColumns="2">
    
          <container:portlet column="0">
            <client:Portlet headingText="Tools" height="80" collapsible="false">
              <container:HBoxLayoutContainer>
                <button:TextButton ui:field="mSaveTimesheetButton" width="120"
                    height="26">Save Timesheet</button:TextButton>
              </container:HBoxLayoutContainer>
            </client:Portlet>
          </container:portlet>
    
          <container:portlet column="0">
            <client:Portlet headingText="New Timesheet Entry" height="200"
                collapsible="true" titleCollapse="true">
              <client:FramedPanel headerVisible="false" bodyBorder="false">
                <container:VerticalLayoutContainer>
                  <container:child layoutData="{fullWidth}">
                    <form:DateField ui:field="mNewDateField" 
                        styleName="{style.bottomSpacing}"/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:ComboBox ui:field="mProjectComboBox" 
                        styleName="{style.bottomSpacing}" emptyText="Select project..."/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:TextField ui:field="mTotalHoursField" 
                        styleName="{style.bottomSpacing}" emptyText="Enter hours..."/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <container:HBoxLayoutContainer>
                      <button:TextButton ui:field="mAddEntryButton" width="120"
                          height="24">Add Entry</button:TextButton>
                    </container:HBoxLayoutContainer>
                  </container:child>
                </container:VerticalLayoutContainer>
              </client:FramedPanel>
            </client:Portlet>
          </container:portlet>
    
          <container:portlet column="1">
            <client:Portlet headingText="Timesheet" height="510" collapsible="true"
                titleCollapse="true">
              <client:FramedPanel headerVisible="false" bodyBorder="false">
                <container:VerticalLayoutContainer>
                  <container:child layoutData="{fullWidth}">
                    <form:FieldLabel text="Employee" labelWidth="100">
                      <form:child><gwt:Label ui:field="mEmployeeLabel" 
                          styleName="{style.employee}"/></form:child>
                    </form:FieldLabel>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <form:FieldLabel text="Month" labelWidth="100">
                      <form:child>
                        <form:SimpleComboBox ui:field="mMonthComboBox" 
                            emptyText="Select month..."/>
                      </form:child>
                    </form:FieldLabel>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <widget:DefaultListWidget ui:field="mTimesheetListWidget"
                        addStyleNames="{style.bottomSpacing} {style.topSpacing}" 
                            height="350"/>
                  </container:child>
                  <container:child layoutData="{fullWidth}">
                    <container:HBoxLayoutContainer>
                      <button:TextButton ui:field="mDeleteEntryButton" width="120" 
                          height="24">Remove Entry</button:TextButton>
                    </container:HBoxLayoutContainer>
                  </container:child>
                </container:VerticalLayoutContainer>
              </client:FramedPanel>
            </client:Portlet>
          </container:portlet>
    
        </container:PortalLayoutContainer>
        </client:ContentPanel>
    
    </ui:UiBinder>

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    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


    Your example is missing the com.arcus.pba.client.shared.widget.DefaultListWidget, as well as the basic wiring needs for the ComboBoxes. Deleting these, I can run the example, and see the issue.

    Another thing I deleted: FramedPanel, without an header or border. Without those things, it is just a placeholder, and would be better to be removed to create less objects.

    The bug seems to be coming from the HBoxLayoutContainers you are adding - there may be a bug here, I'll see about investigating further. That said, these containers are only each holding a single child - why add them at all? Removing those containers causes the issue to go away.

    One more thing I wanted to note: Portlet is a subclass of ContentPanel, which has explicit support for buttons at the bottom of the panel, which appears to be the effect you are trying to achieve. If you add the buttons using this instead of a HBox at the bottom, it is nearly what you started with. To customize the position of these buttons, buttonAlign="START" or buttonAlign="CENTER" can be used, or the default of buttonAlign="END".

    Here's the uibinder xml I ended up with, with the thoughts above bolded:

    Code:
    <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
      xmlns:gwt="urn:import:com.google.gwt.user.client.ui" xmlns:client="urn:import:com.sencha.gxt.widget.core.client"
      xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
      xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
      xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container">
    
    
      <ui:style>
        .topSpacing { margin-top: 10px; }
        .bottomSpacing { margin-bottom: 5px; }
        .employee { font-weight: bold; font-size: 12px; }
        .newEntry { font-weight: bold; font-size: 12px; margin-bottom: 5px; margin-top: 10px; }
      </ui:style>
    
    
      <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="fullWidth">
        <ui:attributes width="1" height="-1" />
      </ui:with>
    
    
      <client:ContentPanel headingText="Timesheet" bodyBorder="false" borders="false" width="500" height="500">
        <container:PortalLayoutContainer ui:field="mPortalLayoutContainer" numColumns="2">
    
    
          <container:portlet column="0">
            <client:Portlet headingText="Tools" height="80" collapsible="false" 
                buttonAlign="END">
              <client:button>
                <button:TextButton ui:field="mSaveTimesheetButton" width="120" height="26">Save Timesheet</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
          <container:portlet column="0">
            <client:Portlet headingText="New Timesheet Entry" height="200" collapsible="true" titleCollapse="true" 
               buttonAlign="CENTER">
              <container:VerticalLayoutContainer>
                <container:child layoutData="{fullWidth}">
                  <form:DateField ui:field="mNewDateField" styleName="{style.bottomSpacing}" />
                </container:child>
    
    
                <container:child layoutData="{fullWidth}">
                  <form:TextField ui:field="mTotalHoursField" styleName="{style.bottomSpacing}" emptyText="Enter hours..." />
                </container:child>
              </container:VerticalLayoutContainer>
              <client:button>
                <button:TextButton ui:field="mAddEntryButton" width="120" height="24">Add Entry</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
          <container:portlet column="1">
            <client:Portlet headingText="Timesheet" height="510" collapsible="true" 
               titleCollapse="true" buttonAlign="START">
              <container:VerticalLayoutContainer>
                <container:child layoutData="{fullWidth}">
                  <form:FieldLabel text="Employee" labelWidth="100">
                    <form:child>
                      <gwt:Label ui:field="mEmployeeLabel" styleName="{style.employee}" />
                    </form:child>
                  </form:FieldLabel>
                </container:child>
                <container:child layoutData="{fullWidth}">
                  <form:FieldLabel text="Month" labelWidth="100">
    
    
                  </form:FieldLabel>
                </container:child>
              </container:VerticalLayoutContainer>
              <client:button>
                <button:TextButton ui:field="mDeleteEntryButton" width="120" height="24">Remove Entry</button:TextButton>
              </client:button>
            </client:Portlet>
          </container:portlet>
    
    
        </container:PortalLayoutContainer>
      </client:ContentPanel>
    
    
    </ui:UiBinder>

  5. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    28
    Vote Rating
    1
    rbrecheis is on a distinguished road

      0  

    Default


    Hi Colin,

    Thanks very much for your help. Your suggestions have indeed solved the problem. I'm no longer using the HBoxLayoutContainer. Whenever I have multiple buttons inside the <client:button> block, I use a FlowLayoutContainer.

    Thanks again!

    Ralph

  6. #6
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    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


    That's one option, and I apologize if I wasn't sufficiently clear - Otherwise, you can add several buttons, each in its own <client:button> tag. This will give the ContentPanel details about how many buttons there are, so it knows how to overflow them if needed. Check out http://www.sencha.com/examples/#Exam...%28uibinder%29 for an example of doing this.

Thread Participants: 2

Tags for this Thread