PDA

View Full Version : Treegrid AutoHeight issue



sungwooKang
1 Sep 2010, 2:27 AM
I want my treeGrid changes its height automatically when it is expanding or collapsing.
So I tried setAutoHeight(true); and it works but some of rows don't appear.
there is a space for the rows but no items. After i clicked the space then the item shows up.

I've seen setAutoHeight is not recommended in most cases in this forum so I tried another way
which is used in AutoHeightGridExample (http://www.sencha.com/examples/explorer.html#autoheightgrid).
But same problem has happend.

I also tried with viewport and RowLayout but failed.

here is my source code modified from RowEditorTreeGridExample



/*
* Ext GWT - Ext for GWT
* Copyright(c) 2007-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
package com.UltimateDataTable.prototype.client;

import java.util.Arrays;

import com.extjs.gxt.samples.resources.client.Resources;
import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.samples.resources.client.model.Folder;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
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.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGrid;
import com.extjs.gxt.ui.client.widget.treegrid.TreeGridCellRenderer;
import com.google.gwt.user.client.Element;

public class RowEditorTreeGridExample extends LayoutContainer {

TreeGrid<ModelData> tree;
ContentPanel cp;


protected void doAutoHeight() {
if(tree.isViewReady()) {
tree.getView().getScroller().setStyleAttribute("overflowY", "hidden");
cp.setHeight((tree.getView().getBody().isScrollableX() ? 19:0 ) + tree.el().getFrameWidth("tb")
+ tree.getView().getHeader().getHeight() + cp.getFrameHeight()
+ tree.getView().getBody().firstChild().getHeight());
}
}


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

setLayout(new FlowLayout(10));

Folder model = TestData.getTreeModel();

TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);

ColumnConfig name = new ColumnConfig("name", "Name", 100);
name.setRenderer(new TreeGridCellRenderer<ModelData>());
TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
name.setEditor(new CellEditor(text));

ColumnConfig author = new ColumnConfig("author", "Author", 100);
author.setEditor(new CellEditor(new TextField<String>()));
ColumnConfig size = new ColumnConfig("genre", "Genre", 100);
size.setEditor(new CellEditor(new TextField<String>()));

ColumnModel cm = new ColumnModel(Arrays.asList(name, author, size));

//ContentPanel cp = new ContentPanel();
cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("RowEditor TreeGrid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setFrame(true);
cp.setWidth(600);

//TreeGrid<ModelData> tree = new TreeGrid<ModelData>(store, cm);
tree = new TreeGrid<ModelData>(store, cm);
tree.setBorders(true);
tree.getStyle().setLeafIcon(Resources.ICONS.music());
//tree.setSize(400, 400);
tree.setAutoExpandColumn("name");
tree.setTrackMouseOver(false);

RowEditor<ModelData> editor = new RowEditor<ModelData>();
tree.addPlugin(editor);

cp.add(tree);

add(cp);

tree.addListener(Events.ViewReady, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
doAutoHeight();
}
});

tree.addListener(Events.Expand, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
doAutoHeight();
}
});

tree.addListener(Events.Collapse, new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent be) {
doAutoHeight();
}
});


}

}



Please help me on this.

sven
1 Sep 2010, 3:43 AM
It is an issue in the BufferView class. I will reply here once again when it is fixed in SVN.

For now, disable buffering:



tree.getTreeView().setBufferEnabled(false);

This should do it.

sven
1 Sep 2010, 7:59 AM
The fix for this is in SVN now as of revision 2211 for GXT 2.2.1

sungwooKang
1 Sep 2010, 4:56 PM
Thanks a lot!