Feature grid not taking data from geoserver layer WMS using geoext 3

Question

this is my grid.js file which is included in the grid.html. I don't know what is wrong with my code. I have seen examples and tried to perform same with my geoserver layer but no output. My code after variable store is not working. I want to load my file on the web and display its data in feature grid using geoext 3.0.0. Kindly help.

  Ext.require([
        'Ext.container.Container',
        'Ext.panel.Panel',
        'Ext.grid.GridPanel',
        'GeoExt.component.Map',
        'GeoExt.data.store.Features'
    ]);

    Ext.onReady(function () {

        var wmsLayer = new ol.layer.Image({
            source: new ol.source.ImageWMS({
                url: 'http://localhost:8080/geoserver/opengeo/wms',
                params: {'LAYERS': 'opengeo:abc'},              
                serverType: 'geoserver'

            })
        });

        var baseLayer = new ol.layer.Tile({
                        source: new ol.source.TileWMS({
                            url: 'http://ows.terrestris.de/osm-gray/service',
                            params: {'LAYERS': 'OSM-WMS', 'TILED': true}
                        })
                    });

        var view = new ol.View({
            center:  ol.proj.fromLonLat([75, 36]),
            zoom: 8
        });

        var map = new ol.Map({
            layers: [ baseLayer, wmsLayer ],
            target: 'map',
            view: view
        });



        var store = Ext.create("GeoExt.data.store", {
                url: 'http://localhost:8080/geoserver/wms',
                params: {'LAYERS': 'opengeo:abc'},  
                autoLoad: true
        });

        grid1 = Ext.create('Ext.grid.Panel', {
                title: 'Main Cities',
                border: true,
                region: 'east',
                store: store,
                columns: [

                    {text: 'CityName', dataIndex: 'Name'}
                ],
                width: 300

            });

            var mapComponent = Ext.create('GeoExt.component.Map', {
                map: olMap
            });
            var mapPanel = Ext.create('Ext.panel.Panel', {
                region: 'center',
                height: 400,
                layout: 'fit',
                items: [mapComponent]
            });

            var description = Ext.create('Ext.panel.Panel', {
                contentEl: 'description',
                region: 'south',
                title: 'Description',
                height: 180,
                border: false,
                bodyPadding: 5,
                autoScroll: true
            });

            Ext.create('Ext.Viewport', {
                layout: 'border',
                items: [mapPanel, grid1, description]
            });




    });

What is happening when you run this code? Do you see any output in the browser console? — Bernard Vander Beken, Aug 08 '16 at 08:46
It was not showing any thing in the browser nor any error in the console... — Syed Faraz Ali Shah, Aug 10 '16 at 06:53

score 0 · Answer 1 · answered Oct 19 '16 at 10:11

In the first lines you require GeoExt.data.store.Features but try to instantiate the package GeoExt.data.store later. Try this:

var store = Ext.create("GeoExt.data.store.Features", {
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': 'opengeo:abc'},  
  autoLoad: true
});

Also, you try to hand over a variable olMap to the GeoExt map component. You named it map some lines above. Try:

var mapComponent = Ext.create('GeoExt.component.Map', {
  map: map
});

Feature grid not taking data from geoserver layer WMS using geoext 3

1 Answers1