fother
26 Jan 2009, 4:45 AM
package com.extjs.gxt.samples.client.examples.tree;
import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.samples.client.Examples;
import com.extjs.gxt.samples.client.FileServiceAsync;
import com.extjs.gxt.samples.client.examples.model.FileModel;
import com.extjs.gxt.samples.client.examples.model.FolderModel;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.binder.TreeTableBinder;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.Loader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.data.TreeLoader;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.store.StoreSorter;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.table.DateTimeCellRenderer;
import com.extjs.gxt.ui.client.widget.treetable.TreeTable;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumn;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumnModel;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
public class TreeTableExample extends LayoutContainer {
@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
setLayout(new FlowLayout(10));
final FileServiceAsync service = (FileServiceAsync) Registry.get(Examples.FILE_SERVICE);
List<TreeTableColumn> columns = new ArrayList<TreeTableColumn>();
TreeTableColumn column = new TreeTableColumn("name", "Name", 300);
column.setMinWidth(75);
columns.add(column);
column = new TreeTableColumn("date", "Date", 170);
column.setRenderer(new DateTimeCellRenderer(DateTimeFormat.getMediumDateTimeFormat()));
columns.add(column);
column = new TreeTableColumn("size", "Size", 120);
columns.add(column);
TreeTableColumnModel cm = new TreeTableColumnModel(columns);
final TreeTable table = new TreeTable(cm);
table.setAnimate(false);
table.getStyle().setLeafIconStyle("icon-page");
// data proxy
RpcProxy<FileModel, List<FileModel>> proxy = new RpcProxy<FileModel, List<FileModel>>() {
@Override
protected void load(FileModel loadConfig, AsyncCallback<List<FileModel>> callback) {
service.getFolderChildren(loadConfig, callback);
}
};
// tree loader
final TreeLoader loader = new BaseTreeLoader(proxy) {
@Override
public boolean hasChildren(ModelData parent) {
return parent instanceof FolderModel;
}
};
loader.addListener(Loader.BeforeLoad, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
if (table.el() != null) {
table.el().mask(GXT.MESSAGES.loadMask_msg());
}
}
});
loader.addListener(Loader.Load, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
if (table.el() != null) {
table.el().unmask();
}
}
});
// trees store
final TreeStore<FileModel> store = new TreeStore<FileModel>(loader);
store.setStoreSorter(new StoreSorter<FileModel>() {
@Override
public int compare(Store store, FileModel m1, FileModel m2, String property) {
boolean m1Folder = m1 instanceof FolderModel;
boolean m2Folder = m2 instanceof FolderModel;
if (m1Folder && !m2Folder) {
return -1;
} else if (!m1Folder && m2Folder) {
return 1;
}
return super.compare(store, m1, m2, property);
}
});
final TreeTableBinder<FileModel> binder = new TreeTableBinder<FileModel>(table, store);
binder.setDisplayProperty("name");
table.setSize(700, 300);
ListStore<FolderModel> comboStore = new ListStore<FolderModel>();
comboStore.add(new FolderModel("xxx", "x"));
ComboBox<FolderModel> combo = new ComboBox<FolderModel>();
combo.setStore(comboStore);
combo.setDisplayField("name");
combo.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
binder.getTreeStore().getLoader().load(null);
}
});
add(combo);
addText("<div style='font-size: 12px;padding-bottom: 8px'>TreeTable example using a TreeStore with a TreeLoader using RCP.</div>");
add(table);
}
}
I use this example to load the data into a treetable using a combobox..
when you change the value of the combo.. the treetable load the data.. but to show the data you need click into a treetable..
if use the button work fine
import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.samples.client.Examples;
import com.extjs.gxt.samples.client.FileServiceAsync;
import com.extjs.gxt.samples.client.examples.model.FileModel;
import com.extjs.gxt.samples.client.examples.model.FolderModel;
import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.binder.TreeTableBinder;
import com.extjs.gxt.ui.client.data.BaseTreeLoader;
import com.extjs.gxt.ui.client.data.Loader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.data.TreeLoader;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.store.StoreSorter;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.table.DateTimeCellRenderer;
import com.extjs.gxt.ui.client.widget.treetable.TreeTable;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumn;
import com.extjs.gxt.ui.client.widget.treetable.TreeTableColumnModel;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
public class TreeTableExample extends LayoutContainer {
@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);
setLayout(new FlowLayout(10));
final FileServiceAsync service = (FileServiceAsync) Registry.get(Examples.FILE_SERVICE);
List<TreeTableColumn> columns = new ArrayList<TreeTableColumn>();
TreeTableColumn column = new TreeTableColumn("name", "Name", 300);
column.setMinWidth(75);
columns.add(column);
column = new TreeTableColumn("date", "Date", 170);
column.setRenderer(new DateTimeCellRenderer(DateTimeFormat.getMediumDateTimeFormat()));
columns.add(column);
column = new TreeTableColumn("size", "Size", 120);
columns.add(column);
TreeTableColumnModel cm = new TreeTableColumnModel(columns);
final TreeTable table = new TreeTable(cm);
table.setAnimate(false);
table.getStyle().setLeafIconStyle("icon-page");
// data proxy
RpcProxy<FileModel, List<FileModel>> proxy = new RpcProxy<FileModel, List<FileModel>>() {
@Override
protected void load(FileModel loadConfig, AsyncCallback<List<FileModel>> callback) {
service.getFolderChildren(loadConfig, callback);
}
};
// tree loader
final TreeLoader loader = new BaseTreeLoader(proxy) {
@Override
public boolean hasChildren(ModelData parent) {
return parent instanceof FolderModel;
}
};
loader.addListener(Loader.BeforeLoad, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
if (table.el() != null) {
table.el().mask(GXT.MESSAGES.loadMask_msg());
}
}
});
loader.addListener(Loader.Load, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
if (table.el() != null) {
table.el().unmask();
}
}
});
// trees store
final TreeStore<FileModel> store = new TreeStore<FileModel>(loader);
store.setStoreSorter(new StoreSorter<FileModel>() {
@Override
public int compare(Store store, FileModel m1, FileModel m2, String property) {
boolean m1Folder = m1 instanceof FolderModel;
boolean m2Folder = m2 instanceof FolderModel;
if (m1Folder && !m2Folder) {
return -1;
} else if (!m1Folder && m2Folder) {
return 1;
}
return super.compare(store, m1, m2, property);
}
});
final TreeTableBinder<FileModel> binder = new TreeTableBinder<FileModel>(table, store);
binder.setDisplayProperty("name");
table.setSize(700, 300);
ListStore<FolderModel> comboStore = new ListStore<FolderModel>();
comboStore.add(new FolderModel("xxx", "x"));
ComboBox<FolderModel> combo = new ComboBox<FolderModel>();
combo.setStore(comboStore);
combo.setDisplayField("name");
combo.addListener(Events.Change, new Listener<FieldEvent>() {
public void handleEvent(FieldEvent be) {
binder.getTreeStore().getLoader().load(null);
}
});
add(combo);
addText("<div style='font-size: 12px;padding-bottom: 8px'>TreeTable example using a TreeStore with a TreeLoader using RCP.</div>");
add(table);
}
}
I use this example to load the data into a treetable using a combobox..
when you change the value of the combo.. the treetable load the data.. but to show the data you need click into a treetable..
if use the button work fine