PDA

View Full Version : Openlayer Map



tameen
28 Jan 2015, 4:32 AM
I have create MVC app in Sencha - there are two views one has openlayer map and other has grid data- i want to show map in south panel and grid in north panel but the open layer map doesn't show in panel - Can anyone help me to solve the problem -

FIRST VIEW :
Ext.define('PrjApp.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.userlist',
var mappanel = Ext.widget('useredit');
var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: '100%',
height: '100%',
renderTo: Ext.getBody(),
layout: {
type: 'hbox', // Arrange child items vertically
align: 'stretch', // Each takes up full width
padding: 5
},
items: [{ // Results grid specified as a config object with an xtype of 'grid'
xtype: 'grid',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
flex: 1 // Use 1/3 of Container's height (hint to Box layout)
}, {
xtype: 'splitter' // A splitter between the two child items
}, { // Details Panel specified as a config object (no xtype defaults to 'panel').
title: 'Details',
bodyPadding: 5,
items: [mappanel], // An array of form fields
flex: 2 // Use 2/3 of Container's height (hint to Box layout)
}]
});

}
});


SECOND VIEW :


Ext.define('PrjApp.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',


// layout: 'fit',

border: 'false',
//layout: 'fit',
region: 'west',
width: 200,
// GeoExt.panel.Map-specific options :
center: '12.3046875,51.48193359375',
zoom: 6,
initComponent: function() {
var me = this;
var map = new OpenLayers.Map("map-id");

map.addControl(new OpenLayers.Control.LayerSwitcher());

var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS - Basic",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);

map.addLayers([wms]);

var mappanel = Ext.create('GeoExt.panel.Map', {
title: 'Simple Web Map',
//width: '30%',
//height: '30%',
map: map,
region: 'north',
});



Ext.create('Ext.container.Viewport', {
// width: '30%',
// height: '30%',
renderTo: Ext.getBody(),
layout: {
type: 'card', // Arrange child items vertically
//align: 'center' // Each takes up full width

},

items: [mappanel]
});



me.callParent(arguments);
}
});

lumberjack
30 Jan 2015, 6:51 AM
You'll likely need to wait until the component has rendered before trying to create the map instance.

The fiddle below demonstrates the use of a LeafletJS map being rendered into a panel's body element in boxready event listener.

Regards,
Brian

bd1