Tell me more ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to fetch the data from JSON and display it onto the grid. The store has all the JSON data, but I it is not visible in the Grid. The grid comes out completely blank.

This is the application, http://128.196.142.12/geo/test/test_new.html, select the Bioclim Data tool from the toolbar, on the top right and then click on the map.

Here is the entire code,

action = new GeoExt.Action({
        text: "BioClim Data",
        control: new OpenLayers.Control.Click({
             //control.events.on({"click": function(evt) {
                 trigger: function(evt) {
                      var lonLat = evt.xy;
                      var proj = new OpenLayers.Projection("EPSG:4326");
                      var nlonLat = new OpenLayers.LonLat(panel.map.getLonLatFromViewPortPx(lonLat).lon, panel.map.getLonLatFromViewPortPx(lonLat).lat);
                      nlonLat.transform(panel.map.getProjectionObject(), panel.map.displayProjection);
                      if (popup) popup.close();
                      var  request = Ext.Ajax.request({
                      url:"/cgi-bin/proxy.cgi?url=http://128.196.142.12:9000/info?lat="+ nlonLat.lat +"&lon="+ nlonLat.lon,
                      disableCaching: false,
                      success: function(response) {
                              var obj = Ext.decode(response.responseText);
                              var jsonData = Ext.util.JSON.decode(response.responseText);
                              //console.dir(obj);
                              store = new GeoExt.data.FeatureStore({
                                  layer: features,
                                  fields: jsonData,
                                  autoLoad: true
                              });
                              addToPopup(lonLat, response.responseText);

                              var grid = new Ext.grid.GridPanel({
                    title: "BioClim Table",
                    store: store,
                    width: 600,
                    height: 250,
                    stripeRows: true,
                    columns: [{
                        header: "Annual Mean Temperature",
                        width: 200,
                        dataIndex: "mat"
                    }, {
                        header: "Mean Diurnal Range",
                        width: 200,
                        dataIndex: "mdr"
                    }, {
                        header: "Isothermality",
                        width: 100,
                        dataIndex: "iso"
                    }, {
                        header: "Temperature Seasonality",
                        width: 200,
                        dataIndex: "tsd"
                    }, {
                        header: "Max Temperature of Warmest Month",
                        width: 200,
                        dataIndex: "maxtwm"
                    }, {
                        header: "Min Temperature of Coldest Month",
                        width: 200,
                        dataIndex: "anntmin"
                    }, {
                        header: "Temperature Annual Range",
                        width: 200,
                        dataIndex: "tar"
                    }, {
                        header: "Mean Temperature of Wettest Quarter",
                        width: 200,
                        dataIndex: "meantwq"
                    }, {
                        header: "Mean Temperature of Driest Quarter",
                        width: 200,
                        dataIndex: "meantdq"
                    }, {
                        header: "Mean Temperature of Warmest Quarter",
                        width: 200,
                        dataIndex: "meantwaq"
                    }, {
                        header: "Mean Temperature of Coldest Quarter",
                        width: 200,
                        dataIndex: "meantcq"
                    }, {
                        header: "Annual Precipitation",
                        width: 150,
                        dataIndex: "annprec"
                    }, {
                        header: "Precipitation of Wettest Month",
                        width: 200,
                        dataIndex: "precwm"
                    }, {
                        header: "Precipitation of Driest Month",
                        width: 200,
                        dataIndex: "precdm"
                    }, {
                        header: "Precipitation Seasonality",
                        width: 200,
                        dataIndex: "precs"
                    }, {
                        header: "Precipitation of Wettest Quarter",
                        width: 200,
                        dataIndex: "precwq"
                    }, {
                        header: "Precipitation of Driest Quarter",
                        width: 200,
                        dataIndex: "precdq"
                    }, {
                        header: "Precipitation of Warmest Quarter",
                        width: 200,
                        dataIndex: "precwarmq"
                    }, {
                        header: "Precipitation of Coldest Quarter",
                        width: 200,
                        dataIndex: "preccq"
                    }],
                    //sm: new GeoExt.grid.FeatureSelectionModel()
                    listeners: {render:function(grid){
                        grid.getSelectionModel().selectFirstRow();
                    }}
                });

                /*var exportCSV = new Ext.ux.Exporter.Button({
                                  component: grid,
                                  text : 'Download CSV'
                              });

                              grid.getTopToolbar().add(exportCSV);*/

                              var win = new Ext.Window({
                                  width: 600,
                                  height: 300,
                                  autoScroll: true,
                                  title: "BioClim Data",
                                  /*tbar: [{
                                    text: 'Download CSV',
                                    handler: new Ext.ux.Exporter.Button({
                                        //alert('Downloads the CSV');
                                        component: grid
                                    })  
                                  }],*/
                                  listners:{show:function() {
                                      this.loadMask = new Ext.LoadMask(this.body, {
                                           msg:'Loading. Please wait...'
                                      });
                                   }},
                                   items: grid        
                            });
                            win.show();
                          },
                      failure: function(response) {
                              console.log('server-side failure with status code ' + response.status);
                              addToPopup(lonLat, "Server side Failure");
                          }  
                             //callback: myhandler
                 });
             }}),
        map: map,
        // button options
        toggleGroup: "draw",
        allowDepress: false,
        tooltip: "Fetch BioClim Data",
        // check item options
        group: "newTool"
    });
    actions["bioclim"] = action;
    toolbarItems.push(action);
share|improve this question

2 Answers

up vote 2 down vote

I think mistake in your store. You not determinete fields but try to get it in your columns. Try this 

 store = new Ext.data.Store({
url: '<your_servlet_url>',
reader: new Ext.data.JSONReader({
        record: 'kad', //its your json record name
        fields: [
            {name: 'kad_status', type: 'string'},
            {name: 'kad_id', type: 'int'},
            {name: 'kad_name', type: 'string'}
        ]
    })
});

Its simplest method. If you want to get server response in another place i should parse your JSON to get a fields.

share|improve this answer
but on Ext.Ajax.request, I already passed the url. Should I pass the same url again? – Sam007 Sep 6 '12 at 19:39
In my example you not need Ext.Ajax.request for create store. Store can himself get JSON (or XML) from server. But if you need in Ext.Ajax.request you can use it, then parse your JSON and create array then use ArrayStore docs.sencha.com/ext-js/3-4/#!/api/Ext.data.Store . – Kliver Max Sep 7 '12 at 5:41
I added the following, var jsonData = Ext.util.JSON.decode(response.responseText); store = new Ext.data.Store({ fields: jsonData }); The firebug shows the fields and the data in there, but still it is not reflected in the grid. Any idea where I am going wrong? :( This is the app link 128.196.142.12/geo/test/test_new.html – Sam007 Sep 7 '12 at 16:07
Oh i think i understand where I am falling short. The jsonData contains the fields and the data. So how can I separate the jsonData -> field and assign it to fields: and jsonData -> data and assign it to data:. This is how my jsonData looks, {"preccq": 240, "annprec": 877, "meantwaq": 116, "mat": 16, "tar": 356, "precs": 16, "tsd": 7994, "precwm": 89, "precwq": 253, "meantcq": -88, "maxtwm": 200, "anntmin": -156, "precwarmq": 243, "iso": 33, "meantdq": 13, "mdr": 120, "precdq": 170, "meantwq": -82, "precdm": 47} – Sam007 Sep 7 '12 at 18:09
I watch to your application and see you dont want to determinate data fields. Okey anyway i dont see your grid. In my example JSON parse automaticaly, but if you want do its by a hands, just work with it like a string. Its not a problem. And i see that you try make app on ExtJs+GeoExt, you try a gxp gxp.opengeo.org/master/examples/viewer.html? – Kliver Max Sep 10 '12 at 6:29
up vote 0 down vote accepted

I was only suppose to change the JSON format to bind to the store. I was using JSON as [var1, var2, var3] but the correct format is [[var1], [var2], [var3]]

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.