Using GXT 2.x and 3.x Together - sizing probleme

[YannickM]

Hi gxt 3.x developpers,

I have a GXT2 application and whant to migrate it to GXT3.
I followed the guide "Using GXT 2.x and 3.x Together" : https://docs.sencha.com/gxt/3.x/gett...tion2and3.html.
I have a sizing problème when I want to display GXT2 Grid on GXT3 TabPanel.
The height of the grid is 0 PX.

On GXT2 interface, my grid is on a ContentPanel which use a FitLayout. I think this component need to know the size of his parent. I think the probleme is here.
On the migration guide provided by sencha we can read :

"In cases where a v2 component needs to be sized by a v3 container ... you can use the ThreeComponentWrapper class included in the test project"



Where can I find this class or download this "test project"?

Thank's for your help.

YannickM

[YannickM]

I found a solution to my problem.

By exploring the BorderLayoutContainer class which was the last gxt3 component before my gxt2 grid, I found the applyLayout method. This method call the ResizeContainer applyLayout.

On this method we can see that if the widget child is not a GXT3 Component, a specific action is done :

if (widget instanceof Component) {...} <- gxt3 component
else {
      XElement.as(widget.getElement()).setSize(width, height, true);
      if (widget instanceof RequiresResize) {
        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
          @Override
          public void execute() {
            ((RequiresResize) widget).onResize();
          }
        });
      }
    }

So I created my wrapper like that :

import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.ui.RequiresResize;




public class ThreeComponentWrapper extends LayoutContainer implements RequiresResize {
  
  
  private LayoutContainer layoutContainer;
  
  public ThreeComponentWrapper(LayoutContainer layoutContainer) {
    this.layoutContainer = layoutContainer;
    setLayout(new FitLayout());
    add(layoutContainer);
  }
  
  
  @Override
  public void onResize() {
    layout(true);
  }
  
}

We have to note that on ResizeContainer.applyLayout methode, the new size is set to the wrapper object :

XElement.as(widget.getElement()).setSize(width, height, true);

With the layout(true), my gxt2 wrapper component propagate the resize event.

I'm not sure it's the best way to do but it solve my problem.

Do not hesistate to comment!

YannickM