Originally Posted by
jpnet
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
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.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:
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.
Steps to load JSON/XML data into a Grid?
Reply With Quote