Feature grid not taking data from geoserver layer WMS using geoext 3 - openlayers-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]
});
});

Answer 1

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
});