GXT 3.0.1 tabpanel : only active tab is rendering correctly

[tnicolas]

Hi everybody,

I am facing a known-issue but I can't find out the way to resole it.

I have a tabPanel in which I am trying to add several tabs (tab number depends on user).

The active tab is correctly rendered but all the others are incorrectly rendered. It is like all the fields are going upper left of the tab.

I found out about doing doLayout (i can't because only forceLayout is available in my case but not resolving my issue) and some other stuff but couldn't succeed in getting a good rendering.

My environment is :
- GXT 3.0.1
- GWT 2.4.0


I am clearly in a dead-end.
Is someone having a clue or an advice to help me resolving this issue ?

Thanks

Thomas

[tnicolas]

Hello,

I still don't succeed in reslving this issue.
It seems that container are not initialized on non-active tabs.

Is someone already have this type of behaviour ?

Thanks

[esag_dk]

You should post some code that shows your described behavior.
I'm sure it's a layout problem. You have to either define the height and width of the TabPanel or use a container with auto height/width for its children.

Try this out (2 fixes included, I'd prefer #2):

    public void onModuleLoad() {
        TabPanel panel = new TabPanel();
        
        //    panel.setPixelSize(300, 300); // <- fix #1
        
        panel.setTabScroll(true);
        panel.setAnimScroll(true);
        
        VerticalLayoutContainer container1 = new VerticalLayoutContainer();
        container1.add(new Label("Tab1"));
        container1.add(new TextField());
        
        HorizontalLayoutContainer container2 = new HorizontalLayoutContainer();
        container2.add(new Label("Tab2"));
        container2.add(new TextField());
        
        panel.add(container1, new TabItemConfig("Tab 1", true));
        panel.add(container2, new TabItemConfig("Tab 2", false));


        VerticalLayoutContainer mainPanel = new VerticalLayoutContainer();
        mainPanel.setPixelSize(300, 300);
        mainPanel.add(panel);
        
        //    mainPanel.add(panel, new VerticalLayoutData(1, 1)); // <- fix #2, which should be prefered
        
        RootPanel.get().add(mainPanel);
        
    }

[tnicolas]

Hello,

Setting pixelsize on tabPanel did not resolve this issue.

I reduce my code to focus on this issue.
The behaviour is the following :
- I am adding two different instances of the same custom composite in a tabpanel
- The first tab is correctly rendered
- The second tab is not

Here is a screenshot :
screenshot.jpg

Here is sample code which allow to reproduce the behaviour

Java code of view integrating tabpanel

public class MainViewImpl extends Composite implements MainView {
 
 interface ViewUiBinder extends UiBinder<Widget, MainViewImpl> {
 }
 private ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class);
 
 
 @UiField
 TabPanel mainPanel;
 
 public  MainViewImpl() {
  initWidget(uiBinder.createAndBindUi(this));
  mainPanel = new TabPanel();
  mainPanel.add(new ActivityWidget(), "Tab1");
  mainPanel.add(new ActivityWidget(), "Tab2");
  
 }
}

xml file corresponding

<!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:d="urn:import:com.google.gwt.user.datepicker.client"
 xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
 xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
 xmlns:toolbar="urn:import:com.sencha.gxt.widget.core.client.toolbar"
    xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
    xmlns:grid="urn:import:com.sencha.gxt.widget.core.client.grid"
    xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form"
 xmlns:l="urn:import:com.cacf.magellan.gwt.client.component.label"
 xmlns:profile="urn:import:com.cacf.iaf.client.main.profile">
 <!-- Feuille de style du framework BluePrint -->
 <ui:with type="com.cacf.magellan.gwt.client.resource.BluePrint"
  field="fwk"></ui:with>
 <ui:style>
  /* Style spécifique à l'écran */
  .sep {
        margin-top: 20px;
     }
 </ui:style>
 
 <g:HTMLPanel styleName="{fwk.style.container}" height="500" width="950">
  <container:VerticalLayoutContainer>
   <gxt:TabPanel ui:field="mainPanel" addStyleNames="margin-10" pixelSize="900,450">
     </gxt:TabPanel>
   </container:VerticalLayoutContainer>
 </g:HTMLPanel>
</ui:UiBinder>

This is java code for the widget in tabs

public class ActivityWidget extends Composite{
  
 //Vue
 private static ViewUiBinder uiBinder = GWT.create(ViewUiBinder.class);
 interface ViewUiBinder extends UiBinder<Widget, ActivityWidget> {
 }
 
 public ActivityWidget(){
  initWidget(uiBinder.createAndBindUi(this));
  
 }
 
 
}

and xml file for binding

<!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:container="urn:import:com.sencha.gxt.widget.core.client.container"
 xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button">
 
 <container:HorizontalLayoutContainer>
 <container:child>
 <gxt:FramedPanel ui:field="activityPanel" width="45%"position="0,0">
 <container:VerticalLayoutContainer>
  <container:child>
   <button:TextButton text="Ajouter" ui:field="activityAdd"/>
  </container:child>
  <container:child>
   <button:TextButton text="Editer" ui:field="activityEdit" enabled="false"/>
   </container:child>
  <container:child>            
   <button:TextButton text="Supprimer" ui:field="activityDelete" enabled="false"/>
   </container:child>
 </container:VerticalLayoutContainer>
 </gxt:FramedPanel>
 </container:child>
 <container:child>
 <gxt:FramedPanel ui:field="activityDnisPanel" width="40%" position="350,0">
 <container:VerticalLayoutContainer>
  <container:child>
   <button:TextButton text="Ajouter" ui:field="activityDnisAdd"/>
  </container:child>
  <container:child>
   <button:TextButton text="Editer" ui:field="activityDnisEdit" enabled="false"/>
   </container:child>
  <container:child>            
   <button:TextButton text="Supprimer" ui:field="activityDnisDelete" enabled="false"/>
   </container:child>
     </container:VerticalLayoutContainer>
  </gxt:FramedPanel>
     </container:child>
 </container:HorizontalLayoutContainer>
</ui:UiBinder>

Thanks for help

[/CODE]

[tnicolas]

Hi,

I have a new example.

It's still the same implementation but I modify xml for my binder file for composite widget.

<!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:container="urn:import:com.sencha.gxt.widget.core.client.container"> 
<container:HorizontalLayoutContainer width="950" height="500">
 <container:FlowLayoutContainer width="530" height="500">
  <gxt:FramedPanel ui:field="activityPanel" headingText="Activités" width="530" height="380" addStyleNames="margin-10">
  </gxt:FramedPanel>
 </container:FlowLayoutContainer>
 <container:FlowLayoutContainer width="530" height="500">
  <gxt:FramedPanel ui:field="activityDnisPanel" headingText="Numéros DNIS associés à l'activité" width="400" height="380" addStyleNames="margin-10" enabled="false">
  </gxt:FramedPanel>
 </container:FlowLayoutContainer>
</container:HorizontalLayoutContainer> 
</ui:UiBinder>

It gives me this result with the same widget in active tab and inactive tab.
screenshot.jpg

It seems like the HorizontalLayoutcontainer is not active on second tab.

I am going to open this as a bug as I don't understand why i have this behaviour.

[tnicolas]

Hello,

I find a solution.
My custom composite have to implement ProvidesResize and RequiresResize.

Thomas

[Colin Alworth]

Another issue is the whitespace to the left of the first tab - this is caused by skipping the reset.css file in your html page. Review the setup.txt for additional instructions on setting this up correctly.