PDA

View Full Version : load treetable with combobox - need click into a treetable to render the data



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

sven
26 Jan 2009, 4:52 AM
Events.Change is fired on a blur (if value has changed).

Listen for Events.Select

fother
26 Jan 2009, 5:08 AM
thanks again :)