How to use both Ext 3 and Ext 4 togeheter with GeoExt?

问题

We are trying to load both Ext 3 and Ext 4 with the use of ext-all-sandbox.js to be able to use GeoExt in Ext 4.

Looking in our DOM it seems we have succeeded with loading Ext 3, Ext 4, GeoExt and OpenLayers but are still getting errors like:

"Ext.functionFactory() is not a function" and "Ext.supports is undefined" .

Is there anyone out there that have tried a similar thing?

This is the index.jsp where we are loading the js files.

<!DOCTYPE HTML>
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<!-- Ext 4 with sandbox mode -->

<script type="text/javascript" src="../gt-static/extjs/ext-all.js"></script>
<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js">
</script>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-all-gray.css"/>
<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css">

<!-- Ext 3 -->

<script src="../gt-static/ext-3.2.1/adapter/ext/ext-base.js" type="text/javascript">   </script>
<script src="../gt-static/ext-3.2.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.2.1/resources/css/ext-all.css"></link>

<!-- OpenLayers -->
<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>


<script type="text/javascript">
// Start app on ready
Ext4.Loader.onReady(function(){
Ext4.Loader.setConfig({enabled: true});
Ext4.require(['Ext4.picker.Date']);
var head = Ext4.fly(document.getElementsByTagName('head')[0]);

// GeoExt
Ext4.core.DomHelper.append(head, {
    tag : 'script',
    type : 'text/javascript',
    src : '../gt-static/GeoExt/lib/GeoExt.js'
});
Ext4.core.DomHelper.append(head, {
    tag : 'script',
    type : 'text/javascript',
    src : '../gt-static/GeoExt/resources/css/geoext-all-debug.css'
});
Ext4.core.DomHelper.append(head, {
    tag : 'script',
    type : 'text/javascript',
    src : 'app.js'
});
},this,true);

</script>

</head>
<body></body>
</html>

and where we use GeoExt together with Ext 3 and Ext 4:

Ext4.define('GT.controller.Authenticated', {
    extend : 'Ext4.app.Controller',

    views : [ 'Authenticated' ],

    init : function () {
        "use strict";
        this.control({
            'authenticated' : {
                render : function () {
                    var panel = new Ext.Panel({
                        title : 'EXT3'
                    });
                    Ext4.getCmp('mappanel').add(panel);
                    var map = new OpenLayers.Map();
                    var layer = new OpenLayers.Layer.WMS("Global Imagery",
                            "http://maps.opengeo.org/geowebcache/service/wms",
                            {
                                layers : "bluemarble"
                            });
                    map.addLayer(layer);

                    new GeoExt.MapPanel({
                        renderTo : 'mappanel',
                        height : 400,
                        width : 600,
                        map : map,
                        title : 'A Simple GeoExt Map'
                    });
                }
            }
        });
    }
});

Screenshots

FireBug - DOM http://img842.imageshack.us/img842/492/dommq.png

FireBug - Errors - Console http://img33.imageshack.us/img33/3703/errorsp.png

回答1:

We managed after alot of problems to solve it:

<script type="text/javascript" src="../gt-static/ext-3.3.1/adapter/ext/ext-base.js"></script> 
<script src="../gt-static/ext-3.3.1/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/ext-3.3.1/resources/css/ext-all.css"></link>

<script src="../gt-static/OpenLayers/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script src="../gt-static/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="../gt-static/GeoExt/resources/css/geoext-all.css"></link>

<script type="text/javascript" src="../gt-static/extjs/builds/ext-all-sandbox.js"></script>

<link rel="stylesheet" type="text/css" href="../gt-static/extjs/resources/css/ext-sandbox.css"/>

Now it is possible to load a GeoExt MapPanel into a Ext 4 container.

Now our problem is that the CSS files dosent seem to work as the ext-all-gray.css

If u guys out there have thoughts about that it would be very appreciated

来源：https://stackoverflow.com/questions/8076735/how-to-use-both-ext-3-and-ext-4-togeheter-with-geoext

标签

extjs4

OpenLayers

extjs3

compatibility