PDA

View Full Version : PagingToolBar not rendering correctly



pletrox
30 Jul 2010, 2:08 AM
Hi,

I noticed the PagingToolBar is not rendering correctly for me.
I'm using: GXT 2.1.1 and GWT 2.0.3.

21739

However when I click on the column "Id", I do get an image next to "Sort Ascending".
This is the class containing the Grid + PagingToolBar:



public class HelloWorldContainer extends LayoutContainer {

@Override
protected void onRender(final Element parent, final int index) {
super.onRender(parent, index);
this.setLayout(new FlowLayout(10));

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("Id", "Id", 100));
columns.add(new ColumnConfig("Type", "Type", 165));

// create the column model
ColumnModel cm = new ColumnModel(columns);

final TransactionServiceAsync service = TransactionService.Util
.getInstance();

RpcProxy<PagingLoadResult<Transaction>> proxy = new RpcProxy<PagingLoadResult<Transaction>>() {
@Override
public void load(final Object loadConfig,
final AsyncCallback<PagingLoadResult<Transaction>> callback) {
service.getTransactions((PagingLoadConfig) loadConfig, callback);
}
};

// loader
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(
proxy);
loader.setRemoteSort(true);

ListStore<Transaction> store = new ListStore<Transaction>(loader);
final Grid<Transaction> grid = new Grid<Transaction>(store, cm);
grid.setStateId("pagingGridExample");
grid.setStateful(true);
grid.addListener(Events.Attach, new Listener<GridEvent<Transaction>>() {
@Override
public void handleEvent(final GridEvent<Transaction> be) {
PagingLoadConfig config = new BasePagingLoadConfig();
config.setOffset(0);
config.setLimit(50);

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.setLoadMask(true);
grid.setBorders(true);
grid.setAutoExpandColumn("Type");

final PagingToolBar toolBar = new PagingToolBar(50);
toolBar.bind(loader);

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

cp.setBottomComponent(toolBar);
cp.add(grid);

this.add(cp);

}

}

Can someone help me out?

Kind regards,
Peter

pletrox
4 Aug 2010, 10:35 AM
up!

sven
4 Aug 2010, 10:39 AM
Have you also updated the css and images so that you are using the latest once? Also make sure that there is no exception somewhere, because your toolbar says there is data and the grid does not show any data.

pletrox
2 Sep 2010, 5:38 AM
Have you also updated the css and images so that you are using the latest once?
What do you mean with that?


Also make sure that there is no exception somewhere, because your toolbar says there is data and the grid does not show any data.
Actually the grid is showing data, but I removed that from the screenshot as it contained sensitive data.

If this help anyone:
I used Firebug to inspect one of the paging buttons and it showed me the following html:

<img border="0" style="background: transparent url(http://localhost:8888/myNamepace.Application/C43A8DC1E50D698B543BF589D0244ECC.cache.png)
no-repeat scroll -370px 0px; width: 16px; height: 16px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; position: absolute; left: -1px; top: -2px;" src="http://localhost:8888/myNamepace.Application/clear.cache.gif" role="presentation" class=" x-btn-image">

I attached a screenshot of http://localhost:8888/myNamepace.Application/C43A8DC1E50D698B543BF589D0244ECC.cache.png. FYI, I needed to upload it in 2 images as it was to long to upload.

Thanks in advance,
Peter

sven
2 Sep 2010, 5:41 AM
Have you tried to reproduce this problem in a small minimal testcase? Is it possible that you have somehow disabled images within your browser?

pletrox
2 Sep 2010, 7:39 AM
Thx for the replies. The problem is "fixed". I fully recreated the project using http://www.extensions.extjs.com/learn/Tutorial:GWT_GXT_and_Maven_howto and everything worked :)

Finally :)
Peter

sven
2 Sep 2010, 7:42 AM
Great :)