Load json data to grid : JSON « GWT « Java

1. Java
2. GWT
3. JSON

Load json data to grid

 
/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
package com.google.gwt.sample.hello.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.JsonLoadResultReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
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.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class Hello implements EntryPoint {
  public void onModuleLoad() {
    RootPanel.get().add(new JsonGridExample());
  }
}
class JsonGridExample extends LayoutContainer {

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    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.setRoot("records");
    type.addField("Sender", "name");
    type.addField("Email", "email");
    type.addField("Phone", "phone");
    type.addField("State", "state");
    type.addField("Zip", "zip");

    // use a http proxy to get the data
    RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "data/data.json");
    HttpProxy<String> proxy = new HttpProxy<String>(builder);

    // need a loader, proxy, and reader
    JsonLoadResultReader<ListLoadResult<ModelData>> reader = new JsonLoadResultReader<ListLoadResult<ModelData>>(type);

    final BaseListLoader<ListLoadResult<ModelData>> loader = new BaseListLoader<ListLoadResult<ModelData>>(proxy,
        reader);

    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.");
    grid.setAutoExpandColumn("Sender");

    ContentPanel panel = new ContentPanel();
    panel.setFrame(true);
    panel.setCollapsible(true);
    panel.setAnimCollapse(false);
    panel.setButtonAlign(HorizontalAlignment.CENTER);
    //panel.setIcon(Resources.ICONS.table());
    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);

    add(panel);

  }

}

   
  

Ext-GWT.zip( 4,297 k)

Related examples in the same category

1.	Class that acts as a client to a JSON service
2.	DataSources can bind directly to JSON data where records appear as an Array of JavaScript Objects with field values (Smart GWT)
3.	Yahoo Json Services Sample (Smart GWT)
4.	DataSources can extract field values from complex JSON structures via XPath expressions (Smart GWT)