PDA

View Full Version : TreeItems just looks like normal text rows??



jeremia.morling
22 Oct 2008, 3:19 AM
Hi!
I just switched from ext-gwt to GWT Ext and noticed that there were several differences in how the layout worked.

I am trying to use a tree as a left side menu. This is what I wrote:



menuTreePanel = new Tree();
administrationRootNode = menuTreePanel.getRootItem();

organizationsAndUsersNode = new TreeItem( LocaleSettings.INSTANCE.organizationsAndUsers() );
administrationRootNode.add( organizationsAndUsersNode );

locationsAndCarsNode = new TreeItem( LocaleSettings.INSTANCE.locationsAndCars() );
administrationRootNode.add( locationsAndCarsNode );

settingsNode = new TreeItem( LocaleSettings.INSTANCE.settings() );
administrationRootNode.add( settingsNode );



The result can be seen in the attached screenshot.
The tree elements are just plain text and can not be selected (and can therefore not be used as a menu in a good way). What am I doing wrong?:-?

Any hint is highly appreciated!
/ Jeremia

jeremia.morling
23 Oct 2008, 2:23 AM
I located the problem myself.
In my html file I need to reference the css file for ext (ext-all.css).
Since I just previously was working with gwt-ext (not Ext GWT), I was used to the fact that I had to put in the ext-all.css file into the project myself, so I did that (it was a part of the release under resources), and made a reference to it.
It then started to complain about images, which was not a part of the release. I thought it strange, but downloaded the ext-js release in order to get the images needed.

Then I got it to work without errors, but not all (e.g. the tree did not work correctly).
After hours of troubleshooting i realized that it started to work if I referenced the ext-all.css incorrectly.

My was under "resources/css/ext-all.css".
But if I referenced "css/ext-all.css" it worked, even though I had no such folder.

I finally realized that the ext-all.css was a part of the gxt.jar as opposite to how it worked in gwt-ext, so I was not supposed to put in my own ext-all and override it.
So:
- I removed my own inserted ext-all.css and related images.
- I corrected the css link to "css/ext-all.css"

And suddenly the GUI started to look correct.:)