I have created the following class to create my navigation panel.
Code:
import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.binder.TreeBinder;
import com.extjs.gxt.ui.client.data.BaseTreeModel;
import com.extjs.gxt.ui.client.data.DefaultModelComparer;
import com.extjs.gxt.ui.client.data.Model;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.ButtonBar;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import ext.plm.speced.ui.client.ComponentRegistry;
import ext.plm.speced.ui.client.navigationTree.NavTree;
import ext.plm.speced.ui.client.navigationTree.SpecTree;
public class NavigationPanel extends ContentPanel {
TreeStore store = new TreeStore();
NavTree navTree = new NavTree();
TreeBinder binder = new TreeBinder<Model>(navTree, store);
String path;
String selectedIdx;
BaseTreeModel selectedTreeItem;
public NavigationPanel() {
super();
store.setModelComparer(new DefaultModelComparer<Model>());
store.setMonitorChanges(true);
setCollapsible(true);
setAnimCollapse(false);
setButtonAlign(HorizontalAlignment.CENTER);
setId("navPanelTree");
setHeading("Tree");
setScrollMode(Scroll.AUTO);
createPanel(this);
}
public TreeStore getStore() {
return store;
}
public void setStore(TreeStore store) {
this.store = store;
}
public TreeBinder getBinder() {
return binder;
}
public void setBinder(TreeBinder binder) {
this.binder = binder;
}
public NavTree getNavTree() {
return navTree;
}
public void setNavTree(NavTree navTree) {
this.navTree = navTree;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
public String getSelectedIdx() {
return selectedIdx;
}
public void setSelectedIdx(String selectedIdx) {
this.selectedIdx = selectedIdx;
}
public BaseTreeModel getSelectedTreeItem() {
return selectedTreeItem;
}
public void setSelectedTreeItem(BaseTreeModel selectedTreeItem) {
this.selectedTreeItem = selectedTreeItem;
}
public void createPanel(NavigationPanel np){
navTree.setId("navigationTree");
binder.setDisplayProperty("title");
binder.init();
//populate the tree
//where I am using
//BaseTreeModel navFolder = new BaseTreeModel();
//store.update(navFolder);
SpecTree.populate(np, false, store);
np.add(createButtonBar(navTree));
np.add(navTree);
np.layout();
}
public NavigationPanel refreshTree(NavigationPanel navPanel, boolean headersOnly){
store.removeAll();
//populate the tree
SpecTree.populate(navPanel, headersOnly, store);
store.commitChanges();
navPanel.layout();
return navPanel;
}
public ButtonBar createButtonBar(final NavTree navTree){
ButtonBar buttonBar = new ButtonBar();
buttonBar.add(new Button("Select", new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
String selectedIndex = ComponentRegistry.NavigationPanel.getSelectedIdx();
TreeStore store = ComponentRegistry.NavigationPanel.getStore();
TreeBinder binder = ComponentRegistry.NavigationPanel.getBinder();
BaseTreeModel tempModel = (BaseTreeModel)store.findModel("index", selectedIndex);
List tempList = store.getAllItems();
TreeItem item2 = (TreeItem) binder.findItem(tempModel);
item2.setChecked(true);
String path = item2.getPath();
navTree.setSelectedItem(item2);
}
}));
return buttonBar;
}
public BorderLayoutData getBorderLayoutData(){
BorderLayoutData borderLayoutData = new BorderLayoutData(LayoutRegion.WEST, 200);
borderLayoutData.setSplit(true);
borderLayoutData.setCollapsible(true);
borderLayoutData.setMargins(new Margins(5));
return borderLayoutData;
}
}
I need to refresh this tree when a form on the right submits (because the items in the tree can change based on the information submited). Here is the code that is on the submit of the form.
Code:
package ext.plm.speced.ui.client.forms;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.event.FormEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.tree.TreeItem;
import ext.plm.speced.ui.client.ComponentRegistry;
import ext.plm.speced.ui.client.layouts.NavigationPanel;
import ext.plm.speced.ui.client.navigationTree.NavTree;
public class ContentFormPanel extends FormPanel {
private String path;
public ContentFormPanel() {
addListener(Events.Submit, new Listener<FormEvent>() {
public void handleEvent(FormEvent arg0) {
//TODO add a check to make sure the submit was successful, if so
NavTree navTree = ComponentRegistry.NavigationPanel.getNavTree();
TreeItem item = navTree.getSelectedItem();
if(item != null){
ComponentRegistry.NavigationPanel.refreshTree(ComponentRegistry.NavigationPanel,true);
TreeStore store = ComponentRegistry.NavigationPanel.getStore();
}else{
}
}
});
}
As you can see, this calls refresh tree, which removes all tree items and readds the correct new items.
My problem is, the Tree is still empty right after it is refreshed, so I cannot go to a specific spot in the tree. (All element data is null).
However, the "Select" button works just fine.
Is there something additional I need to call to actually finish off the tree store to make it accessable immediately after it is created?