PDA

View Full Version : Steps to load JSON/XML data into a Grid?



jpnet
3 Sep 2008, 7:59 AM
Can anyone provide me with the necessary steps to load remote JSON/XML data into a grid? I've done this successfully in ExtJS, but the GXT components seem a bit different.

I'm not asking for code, just some steps/pointers would be nice.

Thanks,

JP

Angelgab82
11 Dec 2008, 8:02 AM
Can anyone provide me with the necessary steps to load remote JSON/XML data into a grid? I've done this successfully in ExtJS, but the GXT components seem a bit different.

I'm not asking for code, just some steps/pointers would be nice.

Thanks,

JP

The xml loads nicely and very well... (i tried it)

http://extjs.com/examples/grid/xml.html

If you want to load it on load.

XmlGridExample.Java

Create under Public folder a folder for data (not necessary) i did it so i keep everything controlled.

otherwise remove the data/

XmlGridExample.Java



package demo.app.client;

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.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.data.XmlReader;
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.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;

public class XmlGridExample extends LayoutContainer {

public XmlGridExample() {
setLayout(new FlowLayout(10));

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("Sender", "Sender", 100));
columns.add(new ColumnConfig("Email", "Email", 165));
columns.add(new ColumnConfig("Phone", "Phone", 100));
columns.add(new ColumnConfig("State", "State", 50));
columns.add(new ColumnConfig("Zip", "Zip Code", 65));

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

// defines the xml structure
ModelType type = new ModelType();
type.root = "records";
type.recordName = "record";
type.addField("Sender", "Name");
type.addField("Email");
type.addField("Phone");
type.addField("State");
type.addField("Zip");

// use a http proxy to get the data
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "data/data.xml");
HttpProxy proxy = new HttpProxy(builder);

// need a loader, proxy, and reader
XmlReader reader = new XmlReader(type);

final BaseListLoader loader = new BaseListLoader(proxy, reader);

ListStore<ModelData> store = new ListStore<ModelData>(loader);
final Grid grid = new Grid<ModelData>(store, cm);
grid.setBorders(true);
grid.setAutoExpandColumn("Sender");

loader.setRemoteSort(true);

ContentPanel panel = new ContentPanel();
panel.setFrame(true);
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setIconStyle("icon-table");
panel.setHeading("XML Table Demo");
panel.setLayout(new FitLayout());
panel.add(grid);
panel.setSize(575, 350);

loader.load();



add(panel);

}

}
You can call this page from EntryPoint by using

XmlGridExample xmlgridex = new XmlGridExample();
item.add(xmlgridex );

----------------------------

I tried to use a code and read from json but it didnt load i used this code:


package demo.app.client;

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.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.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;

public class JsonData extends LayoutContainer {

public JsonData() {
setLayout(new FlowLayout(10));

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig("abbr", "abbr", 100));
columns.add(new ColumnConfig("name", "name", 165));
columns.add(new ColumnConfig("area", "area", 100));
columns.add(new ColumnConfig("population", "population", 50));

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

// defines the xml structure
ModelType type = new ModelType();
type.root = "data";
type.recordName = "abbr";
type.addField("abbr");
type.addField("name");
type.addField("area");
type.addField("population");

// use a http proxy to get the data
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, "data/countries.json");
HttpProxy proxy = new HttpProxy(builder);

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

ListStore<ModelData> store = new ListStore<ModelData>(loader);
final Grid grid = new Grid<ModelData>(store, cm);
grid.setBorders(true);
grid.setAutoExpandColumn("Sender");

loader.setRemoteSort(true);

ContentPanel panel = new ContentPanel();
panel.setFrame(true);
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setIconStyle("icon-table");
panel.setHeading("XML Table Demo");
panel.setLayout(new FitLayout());
panel.add(grid);
panel.setSize(575, 350);

loader.load();



add(panel);

}

}--------------------------

I hope someone can help with json.