OpenLayers with ExtJS 4

Has anybody tried using OpenLayers in an ExtJS 4 page? I've used the GeoExt library for previous projects, but it will be a while before that gets ported to ExtJS4. I'm working on just creating a simple OpenLayers map wrapped in a panel, but I'm not having any luck getting the map to render. Has anybody else been working on this? If I make some progress, I'll post my results.
Thanks,
Luke

Also very interested in this - though I don't have much time to investigate now...
I guess exporting GeoExt to ExtJs 4 will include a quite lot of work, but in the same time it should simplify substantial part of the source code (e.g. layer and treelayer sync would be provided natively by ExtJs 4).

Given the new and exciting capabilities of Ext.draw, what would be nice is a tighter integration of draw features. Here I am especially thinking of GeoExt Vector Layer (that I use quite a bit) that could extend ExtJs sprites. It would not be trivial, but I guess not too complicated (should include a projection capabilities from KML to the map canvas, listen to zoomend and moveend events).
A lot of fun ... That I will post once I have some working stuff
Cheers
C.

Above code doesn't work. I tried to figure out for a while what goes wrong and this is what happens:

initComponent registers afterrender event to afterRender method. Documentation states: "The afterrender event is fired after this Component has been rendered, been postprocesed by any afterRender method defined for the Component."

Next thing defined is afterRender method! So method will be called twice creating map twice. It seem to confure OL and if you put panel somewhere, like in window or other resizeable container you will experience all kind of nasty side-effects when panning map or zooming to area after resize.

To fix this code remove event registration from initComponent and everything works as fine.

Hope that this helps people that have been struggling with same problem.

I'm looking for the same, actually I want to use BingMaps in my ExtJS 4.0.2a based application. Above code sample does display a map, despite that I get tons of javascript errors in Firebug when loading the app. So it doesn't look very stable and trustworthy just yet.
I'm using the latest ExtGeo and OpenLayers lib as of today.

For example:
"Ext.reg is not a function" in MapPanel.js,
"centerPx is null" in OpenLayers.js
"members is undefined" in ext-all-debug.js
... amongst others.

/**
* Copyright (c) 2008-2010 The Open Source Geospatial Foundation
*
* Published under the BSD license.
* See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
* of the license.
*/

/** api: config[map]
* ``OpenLayers.Map or Object`` A configured map or a configuration object
* for the map constructor. A configured map will be available after
* construction through the :attr:`map` property.
*/

/** api: config[layers]
* ``GeoExt.data.LayerStore or GeoExt.data.GroupingStore or Array(OpenLayers.Layer)``
* A store holding records. The layers provided here will be added to this
* MapPanel's map when it is rendered.
*/

/** api: config[prettyStateKeys]
* ``Boolean`` Set this to true if you want pretty strings in the MapPanel's
* state keys. More specifically, layer.name instead of layer.id will be used
* in the state keys if this option is set to true. But in that case you have
* to make sure you don't have two layers with the same name. Defaults to
* false.
*/
prettyStateKeys: false,

/** api: config[extent]
* ``OpenLayers.Bounds or Array(Number)`` An initial extent for the map (used
* if center and zoom are not provided. If an array, the first four items
* should be minx, miny, maxx, maxy.
*/
extent: null,

// if we get strings for state.x, state.y or state.zoom
// OpenLayers will take care of converting them to the
// appropriate types so we don't bother with that
this.center = new OpenLayers.LonLat(state.x, state.y);
this.zoom = state.zoom;

// Ext delays the call to getState when a state event
// occurs, so the MapPanel may have been destroyed
// between the time the event occurred and the time
// getState is called
if(!this.map) {
return;
}

/** private: method[renderMap]
* Private method called after the panel has been rendered or after it
* has been laid out by its parent's layout.
*/
renderMap: function() {
var map = this.map;
map.render(this.body.dom);

/** api: function[guess]
* :return: ``GeoExt.MapPanel`` The first map panel found by the Ext
* component manager.
*
* Convenience function for guessing the map panel of an application. This
* can reliably be used for all applications that just have one map panel
* in the viewport.
*/
GeoExt.MapPanel.guess = function() {
return Ext.ComponentMgr.all.find(function(o) {
return o instanceof GeoExt.panel.Map;
});
};

Basically the OLMap wants to be rendered to a div and so after the panel is rendered you instantiate the map and tell it the div it wants to render to is the body of the owning panel. Then I started wrapping the OpenLayers' functions in my panel so when you see this.addBaseLayers that ends up being a wrapper function for the OpenLayers' function for adding a layer. But that way I can just execute adding layers, markers, etc by interfacing with my custom map panel component itself.