Issues with JsonReader 2.x

[jmccormack]

Hi Everyone,

First time posting on the forum and a noob with Ext-GWT. I am really liking the Ext-GWT controls and such but I am running into some issues with the 2.x version.

Some background on what I am doing. I have a very basic php file that kicks out a json array. This all works correctly and does not appear to have any issues or at least none that I have found :-). What I am running into is that I have a testbed app that populates a Ext-GWT grid based on this json data.

This works as expected when use Ext-GWT 1.x but when I try it with 2.x I basically get nothing. The way I have confirmed this just by switching the GXT jar from a 1.x to a 2.x version of the jar and vice versa. If there is a better way to test differences between the 2 versions, please let me know.

So I guess my questions are, is 1.x not compatible with 2.x? If they are not 100% compatible, is there documentation that outlines the incompatibilities.

Has anyone else run into issues with migrating to 2.x with regards to the JsonReader (or anything else for that matter)?

Does anyone have any suggestions as to what might be going on?

I suspect the issue is in the JsonReader and the retrieval of that data but I am not 100% sure since I don't get any errors. Are there any tricks for debugging these kind of issues? I have firebug installed in firefox and it appears the request is not even being made for the data when using the 2.x version.

I would appreciate any help or suggestions and I have posted the code below.

Thanks,
Jason

Notes about the code. Since I am a noob I have been using the examples provided as a starting point as I get familiar with the libraries, so if it looks like familiar code that is why. I also have stripped out a bunch of code I had commented out so if I have an issues in the code sample that is likely the reason.



package testbed;

import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonReader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
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.button.Button;
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.http.client.RequestBuilder;
import com.google.gwt.user.client.ui.RootPanel;

public class JSONGridTest
{
public void build()
{
LayoutContainer layout = new LayoutContainer();
layout.setLayout(new FlowLayout(10));

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("first_name", "First Name", 100));
columns.add(new ColumnConfig("last_name", "Last Name", 165));

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

// defines the xml structure
ModelType type = new ModelType();

type.root = "RECORDS";
type.addField("first_name", "first_name");
type.addField("last_name", "last_name");


// use a http proxy to get the data
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "http://localhost/PHPExternalJSONData/service.php");
HttpProxy proxy = new HttpProxy(builder);

// need a loader, proxy, and reader
final BaseListLoader loader = new BaseListLoader(proxy, new JsonReader(type));

ListStore<ModelData> store = new ListStore<ModelData>(loader);
final Grid<ModelData> grid = new Grid<ModelData>(store, cm);
grid.setBorders(true);
grid.setLoadMask(true);
grid.getView().setEmptyText("Please hit the load button.");


ContentPanel panel = new ContentPanel();

panel.setFrame(true);
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setHeading("JSON Table Demo");
panel.setLayout(new FitLayout());
panel.add(grid);
panel.setSize(575, 350);

// add buttons
Button load = new Button("Load JSON", new SelectionListener<ButtonEvent>()
{
public void componentSelected(ButtonEvent ce)
{
loader.load();
}
});

panel.addButton(load);
layout.add(panel);

RootPanel.get().add(layout);
}
}

[jmccormack]

Sorry, should have noted that the code is for GXT 1.x and is the working version of the code.

Jason

[jazzer]

I'm having class cast problems with the 2.0 code, but only for the paging grid. The regular grid code worked for me w/ JsonReader, see below (Resource is a subclass of BaseModelData)

RequestBuilder objBuilder = new RequestBuilder(RequestBuilder.GET, "http://localhost:8080/rest/resourceStatus/listAll/json");
//objBuilder.setHeader("content-type", "application/json");

/* v 2.0 code */
HttpProxy<List<Resource>> proxy = new HttpProxy<List<Resource>>(objBuilder);

JsonReader<ArrayList<Resource>> objReader = new JsonReader<ArrayList<Resource>>(Resource.getModelType())
{
@Override
protected ModelData newModelInstance() {
return new Resource();
}
@Override
protected Object createReturnData(Object objLoadConfig, List<ModelData> lstRecords, int intTotalCount) {
if (lstRecords.size() > 0) {
for (ModelData objItem : lstRecords) {
// cast items to resource and initialize if necessary
}
}
return lstRecords;
}
};

BaseListLoader<ListLoadResult<Resource>> loader = new BaseListLoader<ListLoadResult<Resource>>(proxy, objReader);

loader.setRemoteSort(true);

loader.load();

ListStore<Resource> store = new ListStore<Resource>(loader);

[Arno.Nyhm]

you can look at the AdvancedComboBoxExample in the examples of gxt.

there they use the ScriptTagProxy to read the result:



public class AdvancedComboBoxExample extends LayoutContainer {

public AdvancedComboBoxExample() {
String url = "http://extjs.com/forum/topics-remote.php";
ScriptTagProxy<PagingLoadResult<ModelData>> proxy = new ScriptTagProxy<PagingLoadResult<ModelData>>(
url);

ModelType type = new ModelType();
type.setRoot("topics");
type.setTotalName("totalCount");
type.addField("title", "topic_title");
type.addField("topicId", "topic_id");
type.addField("author", "author");
type.addField("excerpt", "post_text");

DataField date = new DataField("lastPost", "post_time");
date.setType(Date.class);
date.setFormat("timestamp");
type.addField(date);

JsonLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonLoadResultReader<PagingLoadResult<ModelData>>(
type) {
@Override
protected ListLoadResult<ModelData> newLoadResult(Object loadConfig,
List<ModelData> models) {
PagingLoadConfig pagingConfig = (PagingLoadConfig) loadConfig;
PagingLoadResult<ModelData> result = new BasePagingLoadResult<ModelData>(models,
pagingConfig.getOffset(), pagingConfig.getLimit());
return result;
}
};

PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(
proxy, reader);

loader.addListener(Loader.BeforeLoad, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
be.<ModelData> getConfig().set("start", be.<ModelData> getConfig().get("offset"));
}
});

ListStore<ModelData> store = new ListStore<ModelData>(loader);

ComboBox<ModelData> combo = new ComboBox<ModelData>();
combo.setWidth(580);
combo.setDisplayField("title");
combo.setItemSelector("div.search-item");
combo.setTemplate(getTemplate());
combo.setStore(store);
combo.setHideTrigger(true);
combo.setPageSize(10);

VerticalPanel vp = new VerticalPanel();
vp.setSpacing(10);

vp.addText("<span class='text'><b>Combo with Templates and Ajax</b><br>This is a more advanced example that shows how you can combine paging, XTemplate and a remote data store to create a 'live search' feature.</span>");
vp.add(combo);

add(vp);
}

private native String getTemplate() /*-{
return [
'<tpl for="."><div class="search-item">',
'<h3><span>{lastPost:date("MM/dd/y")}<br />by {author}</span>{title}</h3>',
'{excerpt}',
'</div></tpl>'
].join("");
}-*/;
}