TreeTable > LayoutContainer > ContentPanel, expand moved the table up a bit

[Kutu]

The structure of the Widget looks like this:

TreeTable within LayoutContainer within ContentPanel. An expand action will "move" the TreeTable header a little bit thus overlap with ContentPanel header.

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.binder.TreeTableBinder;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.TreeLoader;
import com.extjs.gxt.ui.client.data.TreeModelReader;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.treetable.TreeTable;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumn;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumnModel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;
import com.extjs.gxt.samples.resources.client.Folder;
import com.extjs.gxt.samples.resources.client.TestData; 

public class TreeTablePage extends ContentPanel implements EntryPoint {

    public void onModuleLoad() {
        RootPanel.get().add(this);
    }

    @Override
    protected void onRender(final Element parent, final int pos) {
        super.onRender(parent, pos);

        this.setLayout(new FlowLayout(10));
        this.setHeading("Testing");
        this.setFrame(true);

        final List<TreeTableColumn> columns = new ArrayList<TreeTableColumn>();

        TreeTableColumn column = new TreeTableColumn("name", "Name", 300);
        column.setMinWidth(75);
        columns.add(column);

        column = new TreeTableColumn("author", "Author", 170);
        columns.add(column);

        column = new TreeTableColumn("genre", "Genre", 120);
        columns.add(column);

        final TreeTableColumnModel cm = new TreeTableColumnModel(columns);

        final TreeTable table = new TreeTable(cm);
        table.setAnimate(false);
        table.setItemIconStyle("icon-page");

        // tree loader
        final TreeLoader<Folder> loader = new BaseTreeLoader(new TreeModelReader());// = new BaseTreeLoader<Folder>();

        // trees store
        final TreeStore<Folder> store = new TreeStore<Folder>(loader);
        final TreeTableBinder<Folder> binder = new TreeTableBinder<Folder>(table, store);
        binder.setDisplayProperty("name");

        loader.load(TestData.getTreeModel());

        // table.setSize(700, 300);
        LayoutContainer container = new LayoutContainer();
        container.setLayout(new FillLayout());
        container.add(table);

        // this
        // .addText("<div style='font-size: 12px;padding-bottom: 8px'>TreeTable example using a TreeStore with a
        // TreeLoader using RCP.</div>");
        this.add(container);

        final ButtonBar buttonBar = new ButtonBar();
        buttonBar.add(new Button("Store Remove All", new SelectionListener<ComponentEvent>() {

            @Override
            public void componentSelected(final ComponentEvent ce) {
                store.removeAll();
            }

        }));

        buttonBar.add(new Button("Loader Reload", new SelectionListener<ComponentEvent>() {

            @Override
            public void componentSelected(final ComponentEvent ce) {
                loader.load(TestData.getTreeModel());
            }
        }));

        buttonBar.add(new Button("Expand All", new SelectionListener<ComponentEvent>() {

            @Override
            public void componentSelected(final ComponentEvent ce) {
                table.expandAll();
            }
        }));

        buttonBar.add(new Button("Collapse All", new SelectionListener<ComponentEvent>() {

            @Override
            public void componentSelected(final ComponentEvent ce) {
                table.collapseAll();
            }
        }));

        this.add(buttonBar);
    }

}

[Kutu]

Check other bug as well: http://extjs.com/forum/showthread.php?p=215225