Grid with Local Paging

[gaudeo]

Can anybody put here some working example of local paging and sorting grid? I bought gxt license after using free GwtExt, where you can do local paging very easily (see http://www.gwt-ext.com/demo/#localPagingGrid ). Now i am wondering how to do this basic thing in gxt. Although i found some ideas in forum, i still wasn't able to make it. Please help.

[sven]

You need to extend MemoryProxy in that way that it only returns the amount of data that is needed and not all of it.

[gaudeo]

I was trying this,



//grid that worked:
//grid = new Grid<Stock>(store, columnModel);
//add(grid);

//i changed it to this
MemoryProxy memoryProxy = new MemoryProxy(store);
BasePagingLoader loader = new BasePagingLoader(memoryProxy);
loader.setRemoteSort(false);
loader.load(0, 10);
ListStore<Stock> storeLocal = new ListStore<Stock>(loader);
final PagingToolBar toolBar = new PagingToolBar(10);
toolBar.bind(loader);
setBottomComponent(toolBar);
grid = new Grid<Stock>(storeLocal, columnModel);
add(grid);
but there is no row in the grid, even the toolBar didn't appear. What am i doing wrong? Can you please put here some working code? I think local paging grid is a very basic thing that should be in gxt examples.

[paco_online]

hi gaudeo,

have you found out how to implement local paging yet?

greetings
paco

[gaudeo]

Not yet. If i figure out the solution, i'll put the source code here.

[paco_online]

i also found this solution for local paging. but i didn't try it yet, because it's hard to understand for me. i need more experience in Ext GXT. but maybe it helps you. have a look there http://extjs.com/forum/showthread.php?t=60090

[gaudeo]

ok, i got it with the help of dpope22 (http://extjs.com/forum/showthread.php?t=60090).
Here is my code that goes out of the basic grid example (http://extjs.com/examples/grid/grid.html (http://extjs.com/forum/../examples/grid/grid.html)). For the simplicity i left only 2 columns.



/* Local Paging and Sorting Grid */

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoadResult;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.PagingToolBar;
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.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class GridExample extends LayoutContainer {

public GridExample() {
setLayout(new FlowLayout(10));
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);

column = new ColumnConfig();
column.setId("symbol");
column.setHeader("Symbol");
column.setWidth(100);
configs.add(column);

final List<Stock> data = TestData.getStocks();

BasePagingLoader<BasePagingLoadConfig, BasePagingLoadResult<Stock>> loader = new BasePagingLoader<BasePagingLoadConfig, BasePagingLoadResult<Stock>>(null) {
@Override
protected void loadData(BasePagingLoadConfig config, AsyncCallback<BasePagingLoadResult<Stock>> callback) {
try {
//sorting
if (config.getSortInfo().getSortField() != null) {
final String sortField = config.getSortInfo().getSortField();
if (sortField != null) {
Collections.sort(data, config.getSortInfo().getSortDir().comparator(new Comparator() {
public int compare(Object o1, Object o2) {
Stock p1 = (Stock) o1;
Stock p2 = (Stock) o2;
if (sortField.equals("name")) {
return p1.getName().compareTo(p2.getName());
} else if (sortField.equals("symbol")) {
return p1.getSymbol().compareTo(p2.getSymbol());
}
return 0;
}
}));
}
}
//paging
ArrayList<Stock> sublist = new ArrayList<Stock>();
int start = config.getOffset();
int limit = data.size();
if (config.getLimit() > 0) {
limit = Math.min(start + config.getLimit(), limit);
}
for (int i = config.getOffset(); i < limit; i++) {
sublist.add(data.get(i));
}
BasePagingLoadResult result = new BasePagingLoadResult(sublist, config.getOffset(), data.size());
callback.onSuccess(result);
} catch (Exception e) {
callback.onFailure(e);
}
}
};

loader.setRemoteSort(true);
final PagingToolBar toolBar = new PagingToolBar(5);
toolBar.bind(loader);

ListStore<Stock> store = new ListStore<Stock>(loader);
ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(600, 300);

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setLoadMask(true);
grid.setBorders(true);
cp.add(grid);
cp.setBottomComponent(toolBar);

add(cp);
loader.load(0, 5);
}
}

[Vishwajeet Nambiar]

Hi,

For those still facing problems with local paging in Grids, please be informed that the GXT release 1.2.4 has the resolved the issue with the PagingModelMemoryProxy object.

The demo and source code are available at http://extjs.com/explorer/#localpaging.