Following the tutorials and source code at http://www.geoext.org/examples.html#examples, I was able to get a Google Map working. My working code is shown below. Any further advice are still welcome. I guess I was using an outdated syntax.
var mapPanel, controls = [];
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var map = new OpenLayers.Map();
var layer = new OpenLayers.Layer.Google(
'Google Streets',
{numZoomLevels: 20},
{visibility: true}
);
map.addLayers([layer]);
map.addControls(controls);
mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
stateId: "mappanel",
height: "100%",
width: "100%",
map: map,
center: new OpenLayers.LonLat(5, 45),
zoom: 4,
// getState and applyState are overloaded so panel size
// can be stored and restored
getState: function() {
var state = GeoExt.MapPanel.prototype.getState.apply(this);
state.width = this.getSize().width;
state.height = this.getSize().height;
return state;
},
applyState: function(state) {
GeoExt.MapPanel.prototype.applyState.apply(this, arguments);
this.width = state.width;
this.height = state.height;
}
});
});
controls.push(
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
);
// functions for resizing the map panel
function mapSizeUp() {
var size = mapPanel.getSize();
size.width += 40;
size.height += 40;
mapPanel.setSize(size);
}
function mapSizeDown() {
var size = mapPanel.getSize();
size.width -= 40;
size.height -= 40;
mapPanel.setSize(size);
}
There is a <div id="mappanel"></div> in the <body></body> section.
Best Answer
Since GeoExt is based on OpenLayers + Extjs. So basically what you are trying to do is make your own GeoExt like thing.
If you want to use Extjs, because of its better display functions. Using GeoExt will be your best choice.
If you do not need Extjs, Openlayers can be used like using javascript.
Using or not using Extjs, depends on how comfortable you are with OpenLayers. If you are newbie, use OpenLayers without Extjs. Using both at once without proficiency in any will be big problem during debugging.