I am using OpenLayers to create a map; what I want to do is:
1. Create a Panel container (ID = 'parentPanel'), which has two items, a bottom toolbar and a component (or a panel, ID= 'childPanel')
2. Render map into childPanel
So I tried following code, which is modified from a simple app using (Sencha Touch 1 + OpenLayers). The interesting part is: If I want to render map into childPanel, map object is created, but it doesn't show in childPanel; But if I render map into parentPanel, the map shows up, however, this is not what I want, since I want to use toolbar for some tools...
anybody tell me what's happening? thanks a lot!
also, I don't understand why the painted event listener was triggered twice...
(following code is copy-and-run)
Code:
<!DOCTYPE html><html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="http://dev.openlayers.org/releases/OpenLayers-2.11/lib/OpenLayers.js"></script>
<script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
<script type="text/javascript">
// initialize map when page ready
var map, layer;
function init(renderDiv){
map = new OpenLayers.Map( renderDiv);
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 4
);
}
Ext.setup({
onReady : function() {
Ext.create('Ext.Panel', {
id: 'parentPanel',
fullscreen: true,
layout: 'fit',
items: [
{
xtype: 'toolbar',
title: 'OSM Map',
docked: 'bottom'
},
{
xtype: 'component', //xtype: 'panel'
scroll: false,
monitorResize: true,
id: "childPanel",
width: "100%",
height: "100%",
listeners: {
painted: function(){
console.log("map painted"); //run twice, don't understand why...
if(!map)
{
init('childPanel'); //doesn't show anything, although map object is created...
//init('parentPanel'); //show map.. but I want 'childPanel' show map, and put it into 'parentPanel' container...
}
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
Unanswered: Sencha Touch 2 + OpenLayers: how to render a map into a child component of a panel?
Reply With Quote
