Example: Creating a TreePanel with a TreeStore by hand [GWT 2.0-m3]

[HerrB]

As "Tree" is marked deprecated starting with Ext GWT 2.0-m3 you may wonder on how to use TreePanel (which needs a TreeStore) instead.

I *love* examples:

private ModelData getNewItem (String strName) {
ModelData objItem = new BaseModelData();
objItem.set("name", strName);

return objItem;
}

public void onModuleLoad() {
TreeStore<ModelData> objStore = new TreeStore<ModelData>();

TreePanel<ModelData> objTree = new TreePanel<ModelData>(objStore);
objTree.setDisplayProperty("name");

ModelData objParentItem;

// Main item1
objParentItem = getNewItem("Main Item1");
objStore.add(objParentItem, true);
objTree.setLeaf(objParentItem, false);

// First child of main item 1
ModelData objItem;
objItem = getNewItem("Child1-1");
objStore.add(objParentItem, objItem, false);
objTree.setLeaf(objItem, true);

// Main item 2
objParentItem = getNewItem("Main Item2");
objStore.add(objParentItem, true);
objTree.setLeaf(objParentItem, false);

// First child of main item 2
objItem = getNewItem("Child 2-1");
objStore.add(objParentItem, objItem, false);
objTree.setLeaf(objItem, true);

// ... and so on
objItem = getNewItem("Child 2-2");
objStore.add(objParentItem, objItem, false);
objTree.setLeaf(objItem, true);

objItem = getNewItem("Child 2-3");
objStore.add(objParentItem, objItem, false);
objTree.setLeaf(objItem, true);

// Put the tree on a nice panel
ContentPanel objPanel = new ContentPanel();
objPanel.add(objTree);

// Generate a viewport
Viewport objViewport = new Viewport();
objViewport.setLayout(new BorderLayout());

// Put the panel on the viewport
objViewPort(objPanel);

// Show the viewport
RootPanel.get().add(objViewport);
}

Comments on a better way to do things appreciated. Thank you.

Regards,

HerrB

[HerrB]

Applying "single selection only" and adding the selection changed event is a little bit more complicated than in the Tree object:


...
objTree.setLeaf(objItem, true);

objTree.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
objTree.getSelectionModel().addSelectionChangedListener(new SelectionChangedListener<ModelData>() {

@Override
public void selectionChanged(SelectionChangedEvent<ModelData> objEvent) {
ModelData objItem = objEvent.getSelectedItem();

String strName = objItem.get("name"); // This is a bad idea: String strName = (String)objItem.get("name");

// Do things only, if a name has been specified
// Here this is always the case, but if you have added
// another property to the store, e.g. "id" or "action"
// only for the leafs, then you would be able to distingiush
// between "folder" (do nothing) and "leaf" do something

// How to add another property to the store? See below...
if (!strName.equals("")) {
// Do things
}
}
});

// Put the tree on a nice panel
...

To add other properties to the store: Extend the getNewItem method (see above), e.g. like this:

private ModelData getNewItem (String strName, String strAction) {
ModelData objItem = new BaseModelData();
objItem.set("name", strName);
objItem.set("action", strAction);

return objItem;
}

By the way: Sorry for the (silly) type prefixes of the variables - for me it makes things easier to read. And yes, objSomething is a very common thing in Java, I know... ;)

Regards,

HerrB

[jay@moduscreate.com]

ppssst. wrong forum ;)

[HerrB]

Yes, I have seen it just this second, sorry. Could you/someone move this topic to the GXT 2.0 help forum (non-premium, currently)? Thank you.

Currently I can't edit a topic anymore, but maybe this is an IE 6 topic... ;-)

Regards,

HerrB

[crazycatlady]

Thanks so much for this example... very helpful!

[pepez]

Good example! ~o)