PDA

View Full Version : Listening selection change from multiple trees



hiinsu
11 Aug 2010, 4:44 AM
Hi,

I have a content panel with accordion layout.

each sub-content panels(I call these accordion panels) contains a tree panel.

All tree panels have leaf(non-folder) item are instances of the module class (extends to base tree model).

I'd like to know how to listen to selection change event.

I tried adding a selection changed listener to selection service.

But no luck :s

Here's what I did:

SelectionService.get().addListener(new SelectionChangedListener<Module>() {
@Override
public void selectionChanged(SelectionChangedEvent<Entry> event) {
System.out.println("good");
}
});

Any ideas ??

sven
11 Aug 2010, 4:47 AM
To make that code work, you need to register the treepanels with the SelectionService.

Else you can listen to the SelectionChange event on each selectionmodel of the treepanels.

hiinsu
11 Aug 2010, 4:57 AM
Like this?

SelectionService.get().register(treePanal.getSelectionModel());

I'm getting invalid provider message :S

sven
11 Aug 2010, 5:04 AM
You will need to post a fully working testcase for this that implements EntryPoint

hiinsu
11 Aug 2010, 5:19 AM
Here's simplified version of the case:

In the actual code, accordion panels gets updated every few seconds

Module content(treestore) is retrieved from server every time.



package test.client;

import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.layout.AccordionLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Test implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {

ContentPanel cp = new ContentPanel();
build(cp);
RootPanel.get().add(cp);
}

private void build(ContentPanel cp){
cp.setLayout(new AccordionLayout());
cp.setHeight(500);

ContentPanel aPanel;
TreeStore<Module> treeStore;
TreePanel<Module> tree;

// tree content for accordion panel 1
treeStore = new TreeStore<Module>();
treeStore.add(new Module("test module 1"), false);
treeStore.add(new Module("test module 2"), false);
treeStore.add(new Module("test module 3"), false);
tree = new TreePanel<Module>(treeStore);
tree.setDisplayProperty("name");
tree.setBorders(false);
tree.setIconProvider(new ModelIconProvider<Module>() {
public AbstractImagePrototype getIcon(Module module) {
if (module.getIcon() != null) {
return IconHelper.createStyle(module.getIcon());
} else {
return null;
}
}
});

// Accordion Panel 1.
aPanel = new ContentPanel();
aPanel.setHeading("Accordion Panel 1");
aPanel.setLayout(new FitLayout());
aPanel.setAnimCollapse(false);
aPanel.add(tree);
cp.add(aPanel);

// tree content for accordion panel 2
treeStore = new TreeStore<Module>();
treeStore.add(new Module("test module 4"), false);
treeStore.add(new Module("test module 5"), false);
treeStore.add(new Module("test module 6"), false);
tree = new TreePanel<Module>(treeStore);
tree.setDisplayProperty("name");
tree.setBorders(false);
tree.setIconProvider(new ModelIconProvider<Module>() {
public AbstractImagePrototype getIcon(Module module) {
if (module.getIcon() != null) {
return IconHelper.createStyle(module.getIcon());
} else {
return null;
}
}
});


// Accordion Panel 2.
aPanel = new ContentPanel();
aPanel.setHeading("Accordion Panel 2");
aPanel.setLayout(new FitLayout());
aPanel.setAnimCollapse(false);
aPanel.add(tree);
cp.add(aPanel);

// and so on..
}
}





package test.client;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;

@SuppressWarnings("serial")
public class Module extends BaseTreeModel {

private List<String> dn = new ArrayList<String>();

protected Module() {
this(null);
}

protected Module(String name) {
this(name, null);
}

public Module(String name, LayoutContainer page) {
this(name, page, null);
}

public Module(String name, LayoutContainer page, String icon) {
setName(name);
setPage(page);
setIcon(icon);
}

public List<String> getDn(){
return this.dn;
}

public String getName() {
return get("name").toString();
}

public String getIcon() {
return get("icon");
}

public LayoutContainer getPage() {
return (LayoutContainer) get("page");
}

public void setDn(String dn){
this.dn.add(dn);
}

public void setName(String name){
set("name", name);
}

public void setPage(LayoutContainer page){
set("page", page);
}

public void setIcon(String icon){
set("icon", icon);
}
@Override
public String toString() {
return getName();
}

}

hiinsu
11 Aug 2010, 6:28 AM
Sven,

It looks like selection service only supports model data. And it is returning invalid selection provider because my module class extends to base tree model.

You mentioned listening to selection change event on each selection model of the tree panel.

Which class defines event type selection change event???

sven
11 Aug 2010, 6:29 AM
It looks like selection service only supports model data. And it is returning invalid selection provider because my module class extends to base tree model.A basetreemodel is a modeldata.

hiinsu
11 Aug 2010, 6:34 AM
Right. It does implement model data interface.
hmm.. I'm lost. :s

sven
11 Aug 2010, 6:37 AM
I added the selectionservice to your code and it works without any problems:

class Test implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {

ContentPanel cp = new ContentPanel();
build(cp);
RootPanel.get().add(cp);

SelectionService.get().addListener(new SelectionChangedListener<Module>() {
@Override
public void selectionChanged(SelectionChangedEvent<Module> event) {
System.out.println("good");
}
});

}

private void build(ContentPanel cp) {
cp.setLayout(new AccordionLayout());
cp.setHeight(500);

ContentPanel aPanel;
TreeStore<Module> treeStore;
TreePanel<Module> tree;

// tree content for accordion panel 1
treeStore = new TreeStore<Module>();
treeStore.add(new Module("test module 1"), false);
treeStore.add(new Module("test module 2"), false);
treeStore.add(new Module("test module 3"), false);
tree = new TreePanel<Module>(treeStore);
tree.setDisplayProperty("name");
tree.setBorders(false);
tree.setIconProvider(new ModelIconProvider<Module>() {
public AbstractImagePrototype getIcon(Module module) {
if (module.getIcon() != null) {
return IconHelper.createStyle(module.getIcon());
} else {
return null;
}
}
});

SelectionService.get().register(tree.getSelectionModel());

// Accordion Panel 1.
aPanel = new ContentPanel();
aPanel.setHeading("Accordion Panel 1");
aPanel.setLayout(new FitLayout());
aPanel.setAnimCollapse(false);
aPanel.add(tree);
cp.add(aPanel);

// tree content for accordion panel 2
treeStore = new TreeStore<Module>();
treeStore.add(new Module("test module 4"), false);
treeStore.add(new Module("test module 5"), false);
treeStore.add(new Module("test module 6"), false);
tree = new TreePanel<Module>(treeStore);
tree.setDisplayProperty("name");
tree.setBorders(false);
tree.setIconProvider(new ModelIconProvider<Module>() {
public AbstractImagePrototype getIcon(Module module) {
if (module.getIcon() != null) {
return IconHelper.createStyle(module.getIcon());
} else {
return null;
}
}
});

SelectionService.get().register(tree.getSelectionModel());

// Accordion Panel 2.
aPanel = new ContentPanel();
aPanel.setHeading("Accordion Panel 2");
aPanel.setLayout(new FitLayout());
aPanel.setAnimCollapse(false);
aPanel.add(tree);
cp.add(aPanel);

// and so on..
}
}

hiinsu
11 Aug 2010, 6:38 AM
adding selection change event listener to the each selection model does work.
use of selection service seems the right way but I can't figure out how.
Since I'm not expecting lots of accordion panels,
a selection listener to each selection model should be fine. (or I think it should be fine)

hiinsu
11 Aug 2010, 6:43 AM
Do you not get this error msg:
"The method register(SelectionProvider<ModelData>) in the type SelectionService is not applicable for the arguments (TreePanelSelectionModel<Module>)"

sven
11 Aug 2010, 6:45 AM
Update to GXT 2.2 beta 1 ;)

hiinsu
11 Aug 2010, 6:54 AM
so that's the difference between 2.1 and 2.2.

Hope this solves my problem..

BTW, I thought dev team was working on GXT 3.

I remember reading a thread response saying GXT 3 is a complete rewrite up and so is not backward compatible.

When could I expect GXT 3 release and is there point in continuing with GXT2??

hiinsu
11 Aug 2010, 7:01 AM
I got it working!!

Thank you Sven!!