1. #1
    Ext User
    Join Date
    Apr 2008
    Location
    Lincoln, NE
    Posts
    235
    Vote Rating
    0
    jpnet is an unknown quantity at this point

      0  

    Default Steps to load JSON/XML data into a Grid?

    Steps to load JSON/XML data into a Grid?


    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

  2. #2
    Ext User
    Join Date
    Dec 2008
    Location
    Netherlands
    Posts
    16
    Vote Rating
    -1
    Angelgab82 is an unknown quantity at this point

      0  

    Default I hope someone can help with json.

    I hope someone can help with json.


    Quote Originally Posted by jpnet View Post
    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.

Thread Participants: 1