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
