如何将 Ext 3 和 Ext 4 与 GeoExt 一起使用？
Posted
技术标签:
【中文标题】如何将 Ext 3 和 Ext 4 与 GeoExt 一起使用？【英文标题】：How to use both Ext 3 and Ext 4 togeheter with GeoExt? 【发布时间】：2011-11-10 08:33:34 【问题描述】：我们正在尝试使用 ext-all-sandbox.js 加载 Ext 3 和 Ext 4，以便能够在 Ext 4 中使用 GeoExt。
查看我们的 DOM，似乎我们已经成功加载了 Ext 3, Ext 4, GeoExt 和 OpenLayers，但仍然出现以下错误：
“Ext.functionFactory() 不是函数”和“Ext.supports 是 未定义”。
有没有人尝试过类似的事情？
这是我们加载 js 文件的 index.jsp。
<!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>
以及我们将 GeoExt 与 Ext 3 和 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'
);
);
);
截图
FireBug - DOM http://img842.imageshack.us/img842/492/dommq.png
FireBug - 错误 - 控制台 http://img33.imageshack.us/img33/3703/errorsp.png
【问题讨论】：
事件如果技术上可行，在网页中加载 ExtJs 两次 对我来说看起来绝对很奇怪......它已经很重了。 我明白你的意思，这可能是一个问题，比如说 IE8 不能在 DOM 中处理很多东西？ 【参考方案1】：我们解决了很多问题：
<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"/>
现在可以将 GeoExt MapPanel 加载到 Ext 4 容器中。
现在我们的问题是 CSS 文件似乎与 ext-all-gray.css 一样工作
如果你们有想法，那将不胜感激
【讨论】：
以上是关于如何将 Ext 3 和 Ext 4 与 GeoExt 一起使用？的主要内容，如果未能解决你的问题，请参考以下文章
我们如何在 ext js 4.2 中隐藏和显示网格面板的行？
ExtJs 3.4，如何在 Ext.panel 中刷新 autoLoad