View Full Version : Hiding unwanted scrollbars on TreePanel (GXT-2.2.5)

21 Nov 2011, 2:22 AM

I have embedded a TreePanel inside a ContentPanel, and have configured the ContentPanel to have AUTOX scroll behaviour. However, whenever the TreePanel content overflows, I am getting scrollbars on the TreePanel as well as the ContentPanel!

Digging into the HTML, I have discovered that this is because GXT has set an explicit 'style' attribute on the TreePanel's <div>, namely style: 'display: block; overflow-x: auto; overflow-y: auto;'. Removing these "overflow" styles gives me the behaviour that I want.

My code looks like this:

TreeStore<Model> store = new TreeStore<Model>(loader);
final TreePanel<Model> treePanel = new TreePanel<Model>(store);


StoreFilterField<Model> filter = new StoreFilterField<Model>() {
protected boolean doSelect(Store<Model> store, Model parent, Model record, String property, String filter) {
return ... // filter condition


final ContentPanel panel = new ContentPanel(new RowLayout(Orientation.VERTICAL));


panel.add(filter, new RowData(1, -1, new Margins(1)));
panel.add(treePanel, new RowData(-1, 1));

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());


My current strategy is to override these unwanted "overflow" styles using CSS, except that inline styles have extremely high precedence and the "div[style]" trick doesn't work in all browsers (stupid ****ing IE). Obviously, it would be better if GXT didn't set the "overflow" styles in the first place. Is there any way to tell TreePanel not to do this, please? I can't find any obvious way of controlling TreePanel's scroll behaviour programatically.


9 Dec 2011, 5:57 PM
You can access the element for a widget (both Ext GWT components and plain GWT widgets) by calling getElement() on that widget. Once you have the element, you can use getStyle() to get its style attribute (as a Style object) and modify it in whatever way you see fit. In your case, you may be able to simply clear the overflow properties.