Tomeo
10 Dec 2010, 2:19 AM
Hi folks,
I'm trying to implement pagination grid into panel, but unfortunatelly grid rows are not displaying (please see attached picture). Pagination works fine.
I know, this should be simple, and I'm missing just something small, but I can't spot it at the moment 8-|
23753
* Ext GWT 2.2.0 - Ext for GWT
package com.agtransport.agdoprava.client.widget;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import com.agtransport.agdoprava.client.Agdoprava;
import com.agtransport.agdoprava.client.DatabaseServiceAsync;
import com.agtransport.agdoprava.client.Tracing;
import com.agtransport.agdoprava.client.model.Firma;
import com.agtransport.agdoprava.client.model.Uzivatel;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.data.BaseFilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.FilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.IconButton;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.filters.GridFilters;
import com.extjs.gxt.ui.client.widget.grid.filters.StringFilter;
public class LookupFirma extends LayoutContainer {
public LookupFirma() {
}
private FormData formData;
Window window;
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
createFormLookupFirma();
/*
vp = new VerticalPanel();
vp.setSpacing(10);
createFormLookupFirma();
add(vp);
*/
}
private void createFormLookupFirma() {
setLayout(new FlowLayout(10));
window = new Window();
window.setSize(650, 500);
window.setPlain(true);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Seznam firem");
window.setLayout(new FitLayout());
/*
window.addWindowListener(new WindowListener() {
@Override
public void windowHide(WindowEvent we) {
Button open = we.getWindow().getData("open");
open.focus();
}
});
*/
final Uzivatel uzivatel = (Uzivatel) Registry.get(Agdoprava.UZIVATEL);
FormPanel form3 = new FormPanel();
form3.setFrame(true);
//form3.setHeading("Seznam firem");
form3.setWidth(500);
form3.setLayout(new FormLayout());
form3.setLabelAlign(LabelAlign.TOP);
ContentPanel cp = new ContentPanel();
cp.setHeaderVisible(false);
FormLayout cpLayout = new FormLayout();
cp.setLayout(cpLayout);
// toolbar
ToolBar toolBar = new ToolBar();
toolBar.getAriaSupport().setLabel("Grid Options");
TextField<String> filter = new TextField<String>();
toolBar.add(filter);
IconButton filterBtn = new IconButton("icon-filter");
filterBtn.setWidth(50);
toolBar.add(filterBtn);
toolBar.add(new SeparatorToolItem());
Button btnAdd = new Button();
btnAdd.setToolTip("Nová firma");
btnAdd.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Tracing.Log("Nova firma button pressed!");
//showAddZakazka();
}
});
btnAdd.setIcon(IconHelper.createStyle("icon-add"));
toolBar.add(btnAdd);
toolBar.add(new SeparatorToolItem());
Button btnDelete = new Button();
btnDelete.setToolTip("Smazat firmu");
btnDelete.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Tracing.Log("Smazat firmu button pressed!");
//showAddZakazka();
}
});
btnDelete.setIcon(IconHelper.createStyle("icon-delete"));
toolBar.add(btnDelete);
cp.setTopComponent(toolBar);
form3.add(cp, new FormData("100%"));
// grid
final DatabaseServiceAsync service = (DatabaseServiceAsync) Registry.get("DatabaseService");
RpcProxy<PagingLoadResult<Firma>> proxy = new RpcProxy<PagingLoadResult<Firma>>() {
@Override
public void load(Object loadConfig, AsyncCallback<PagingLoadResult<Firma>> callback) {
Tracing.Log("LookupFirma.RpcProxy.load.before");
//service.getZakazky((PagingLoadConfig) loadConfig, callback);
service.getFirmy((FilterPagingLoadConfig) loadConfig, callback);
Tracing.Log("LookupFirma.RpcProxy.load.after");
}
};
// loader
//final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy) {
@Override
protected Object newLoadConfig() {
BasePagingLoadConfig config = new BaseFilterPagingLoadConfig();
return config;
}
};
loader.setRemoteSort(true);
ListStore<Firma> store = new ListStore<Firma>(loader);
PagingToolBar pagingToolBar = new PagingToolBar(30);
pagingToolBar.bind(loader);
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("object_id", "Object Id", 80));
ColumnConfig created = new ColumnConfig("created", "Dátum vytvorenia", 105);
created.setDateTimeFormat(DateTimeFormat.getFormat("dd.MM.yyyy HH:mm:ss"));
columns.add(created);
columns.add(new ColumnConfig("kod_firmy", "Kód", 80));
columns.add(new ColumnConfig("firma", "Firma", 150));
columns.add(new ColumnConfig("mesto", "Město", 80));
columns.add(new ColumnConfig("ulice", "Ulice", 80));
columns.add(new ColumnConfig("psc", "PSC", 60));
columns.add(new ColumnConfig("ico", "IČO", 80));
columns.add(new ColumnConfig("dic", "DIČ", 80));
columns.add(new ColumnConfig("tel1", "Tel.1", 80));
columns.add(new ColumnConfig("tel2", "Tel.2", 80));
columns.add(new ColumnConfig("fax", "Fax", 80));
columns.add(new ColumnConfig("email", "Email", 80));
columns.add(new ColumnConfig("poznamka", "Poznamka", 150));
ColumnModel cm = new ColumnModel(columns);
GridFilters filters = new GridFilters();
StringFilter filterKodFirmy = new StringFilter("kod_firmy");
StringFilter filterFirma = new StringFilter("firma");
StringFilter filterICO = new StringFilter("ico");
filters.addFilter(filterKodFirmy);
filters.addFilter(filterFirma);
filters.addFilter(filterICO);
final Grid<Firma> grid = new Grid<Firma>(store, cm);
grid.setStateId("pagingGridLookupFirma");
grid.setStateful(true);
grid.addListener(Events.Attach, new Listener<GridEvent<Firma>>() {
public void handleEvent(GridEvent<Firma> be) {
//PagingLoadConfig config = new BasePagingLoadConfig();
PagingLoadConfig config = new BaseFilterPagingLoadConfig();
config.setOffset(0);
config.setLimit(30);
Map<String, Object> state = grid.getState();
if (state.containsKey("offset")) {
int offset = (Integer)state.get("offset");
int limit = (Integer)state.get("limit");
config.setOffset(offset);
config.setLimit(limit);
}
if (state.containsKey("sortField")) {
config.setSortField((String)state.get("sortField"));
config.setSortDir(SortDir.valueOf((String)state.get("sortDir")));
}
loader.load(config);
}
});
grid.getSelectionModel().addListener(Events.SelectionChange,
new Listener<SelectionChangedEvent<Firma>>() {
public void handleEvent(SelectionChangedEvent<Firma> be) {
if (be.getSelection().size() > 0) {
Tracing.Log("Grid selection changed - STAV:" + be.getSelectedItem().getFirmaObjectId() );
} else {
Tracing.Log("Nothing selected");
}
}
});
loader.addLoadListener(new LoadListener() {
@Override
public void loaderLoad(LoadEvent le)
{
// Run your selection logic here
Tracing.Log("loaderLoad invoked!");
//Tracing.Log("selectedZakazka selected " + grid.getSelectionModel().getSelectedItem().getZakazkaObjectId() + " " + grid.getSelectionModel().getSelectedItem().getZakazkaStavZakazkyId());
}
});
grid.setLoadMask(true);
grid.setBorders(true);
//grid.setStripeRows(true);
//grid.setColumnLines(true);
//grid.addPlugin(filters);
//grid.setAutoExpandColumn("cislo_dokladu");
cp.add(grid);
cp.setSize(600, 300);
cp.setBottomComponent(pagingToolBar);
grid.getAriaSupport().setLabelledBy(cp.getId());
cp.add(grid, new FormData("100%"));
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Vybrat"));
cp.addButton(new Button("Zrušit"));
window.add(cp, new FitData(4));
}
public void showLookupFirmaWindow() {
createFormLookupFirma();
window.show();
}
}
Many thanks,
Tomas
I'm trying to implement pagination grid into panel, but unfortunatelly grid rows are not displaying (please see attached picture). Pagination works fine.
I know, this should be simple, and I'm missing just something small, but I can't spot it at the moment 8-|
23753
* Ext GWT 2.2.0 - Ext for GWT
package com.agtransport.agdoprava.client.widget;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import com.agtransport.agdoprava.client.Agdoprava;
import com.agtransport.agdoprava.client.DatabaseServiceAsync;
import com.agtransport.agdoprava.client.Tracing;
import com.agtransport.agdoprava.client.model.Firma;
import com.agtransport.agdoprava.client.model.Uzivatel;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.data.BaseFilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.FilterPagingLoadConfig;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.button.IconButton;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.extjs.gxt.ui.client.widget.layout.FormLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.extjs.gxt.ui.client.event.LoadListener;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.filters.GridFilters;
import com.extjs.gxt.ui.client.widget.grid.filters.StringFilter;
public class LookupFirma extends LayoutContainer {
public LookupFirma() {
}
private FormData formData;
Window window;
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
createFormLookupFirma();
/*
vp = new VerticalPanel();
vp.setSpacing(10);
createFormLookupFirma();
add(vp);
*/
}
private void createFormLookupFirma() {
setLayout(new FlowLayout(10));
window = new Window();
window.setSize(650, 500);
window.setPlain(true);
window.setModal(true);
window.setBlinkModal(true);
window.setHeading("Seznam firem");
window.setLayout(new FitLayout());
/*
window.addWindowListener(new WindowListener() {
@Override
public void windowHide(WindowEvent we) {
Button open = we.getWindow().getData("open");
open.focus();
}
});
*/
final Uzivatel uzivatel = (Uzivatel) Registry.get(Agdoprava.UZIVATEL);
FormPanel form3 = new FormPanel();
form3.setFrame(true);
//form3.setHeading("Seznam firem");
form3.setWidth(500);
form3.setLayout(new FormLayout());
form3.setLabelAlign(LabelAlign.TOP);
ContentPanel cp = new ContentPanel();
cp.setHeaderVisible(false);
FormLayout cpLayout = new FormLayout();
cp.setLayout(cpLayout);
// toolbar
ToolBar toolBar = new ToolBar();
toolBar.getAriaSupport().setLabel("Grid Options");
TextField<String> filter = new TextField<String>();
toolBar.add(filter);
IconButton filterBtn = new IconButton("icon-filter");
filterBtn.setWidth(50);
toolBar.add(filterBtn);
toolBar.add(new SeparatorToolItem());
Button btnAdd = new Button();
btnAdd.setToolTip("Nová firma");
btnAdd.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Tracing.Log("Nova firma button pressed!");
//showAddZakazka();
}
});
btnAdd.setIcon(IconHelper.createStyle("icon-add"));
toolBar.add(btnAdd);
toolBar.add(new SeparatorToolItem());
Button btnDelete = new Button();
btnDelete.setToolTip("Smazat firmu");
btnDelete.addSelectionListener(new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Tracing.Log("Smazat firmu button pressed!");
//showAddZakazka();
}
});
btnDelete.setIcon(IconHelper.createStyle("icon-delete"));
toolBar.add(btnDelete);
cp.setTopComponent(toolBar);
form3.add(cp, new FormData("100%"));
// grid
final DatabaseServiceAsync service = (DatabaseServiceAsync) Registry.get("DatabaseService");
RpcProxy<PagingLoadResult<Firma>> proxy = new RpcProxy<PagingLoadResult<Firma>>() {
@Override
public void load(Object loadConfig, AsyncCallback<PagingLoadResult<Firma>> callback) {
Tracing.Log("LookupFirma.RpcProxy.load.before");
//service.getZakazky((PagingLoadConfig) loadConfig, callback);
service.getFirmy((FilterPagingLoadConfig) loadConfig, callback);
Tracing.Log("LookupFirma.RpcProxy.load.after");
}
};
// loader
//final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy);
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy) {
@Override
protected Object newLoadConfig() {
BasePagingLoadConfig config = new BaseFilterPagingLoadConfig();
return config;
}
};
loader.setRemoteSort(true);
ListStore<Firma> store = new ListStore<Firma>(loader);
PagingToolBar pagingToolBar = new PagingToolBar(30);
pagingToolBar.bind(loader);
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("object_id", "Object Id", 80));
ColumnConfig created = new ColumnConfig("created", "Dátum vytvorenia", 105);
created.setDateTimeFormat(DateTimeFormat.getFormat("dd.MM.yyyy HH:mm:ss"));
columns.add(created);
columns.add(new ColumnConfig("kod_firmy", "Kód", 80));
columns.add(new ColumnConfig("firma", "Firma", 150));
columns.add(new ColumnConfig("mesto", "Město", 80));
columns.add(new ColumnConfig("ulice", "Ulice", 80));
columns.add(new ColumnConfig("psc", "PSC", 60));
columns.add(new ColumnConfig("ico", "IČO", 80));
columns.add(new ColumnConfig("dic", "DIČ", 80));
columns.add(new ColumnConfig("tel1", "Tel.1", 80));
columns.add(new ColumnConfig("tel2", "Tel.2", 80));
columns.add(new ColumnConfig("fax", "Fax", 80));
columns.add(new ColumnConfig("email", "Email", 80));
columns.add(new ColumnConfig("poznamka", "Poznamka", 150));
ColumnModel cm = new ColumnModel(columns);
GridFilters filters = new GridFilters();
StringFilter filterKodFirmy = new StringFilter("kod_firmy");
StringFilter filterFirma = new StringFilter("firma");
StringFilter filterICO = new StringFilter("ico");
filters.addFilter(filterKodFirmy);
filters.addFilter(filterFirma);
filters.addFilter(filterICO);
final Grid<Firma> grid = new Grid<Firma>(store, cm);
grid.setStateId("pagingGridLookupFirma");
grid.setStateful(true);
grid.addListener(Events.Attach, new Listener<GridEvent<Firma>>() {
public void handleEvent(GridEvent<Firma> be) {
//PagingLoadConfig config = new BasePagingLoadConfig();
PagingLoadConfig config = new BaseFilterPagingLoadConfig();
config.setOffset(0);
config.setLimit(30);
Map<String, Object> state = grid.getState();
if (state.containsKey("offset")) {
int offset = (Integer)state.get("offset");
int limit = (Integer)state.get("limit");
config.setOffset(offset);
config.setLimit(limit);
}
if (state.containsKey("sortField")) {
config.setSortField((String)state.get("sortField"));
config.setSortDir(SortDir.valueOf((String)state.get("sortDir")));
}
loader.load(config);
}
});
grid.getSelectionModel().addListener(Events.SelectionChange,
new Listener<SelectionChangedEvent<Firma>>() {
public void handleEvent(SelectionChangedEvent<Firma> be) {
if (be.getSelection().size() > 0) {
Tracing.Log("Grid selection changed - STAV:" + be.getSelectedItem().getFirmaObjectId() );
} else {
Tracing.Log("Nothing selected");
}
}
});
loader.addLoadListener(new LoadListener() {
@Override
public void loaderLoad(LoadEvent le)
{
// Run your selection logic here
Tracing.Log("loaderLoad invoked!");
//Tracing.Log("selectedZakazka selected " + grid.getSelectionModel().getSelectedItem().getZakazkaObjectId() + " " + grid.getSelectionModel().getSelectedItem().getZakazkaStavZakazkyId());
}
});
grid.setLoadMask(true);
grid.setBorders(true);
//grid.setStripeRows(true);
//grid.setColumnLines(true);
//grid.addPlugin(filters);
//grid.setAutoExpandColumn("cislo_dokladu");
cp.add(grid);
cp.setSize(600, 300);
cp.setBottomComponent(pagingToolBar);
grid.getAriaSupport().setLabelledBy(cp.getId());
cp.add(grid, new FormData("100%"));
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Vybrat"));
cp.addButton(new Button("Zrušit"));
window.add(cp, new FitData(4));
}
public void showLookupFirmaWindow() {
createFormLookupFirma();
window.show();
}
}
Many thanks,
Tomas