PDA

View Full Version : TreeTable > LayoutContainer > ContentPanel, expand moved the table up a bit



Kutu
26 Aug 2008, 2:57 PM
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
27 Aug 2008, 12:43 PM
Check other bug as well: http://extjs.com/forum/showthread.php?p=215225