如何在GeoExt中同时使用Ext 3和Ext 4? [英] How to use both Ext 3 and Ext 4 togeheter with GeoExt?

查看:105
本文介绍了如何在GeoExt中同时使用Ext 3和Ext 4?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们正在尝试使用ext-all-sandbox.js加载Ext 3Ext 4,以便能够在Ext 4中使用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.

查看我们的DOM,似乎我们已经成功加载了Ext 3, Ext 4, GeoExt和OpenLayers,但仍收到诸如以下错误:

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()不是函数",而"Ext.supports是 未定义".

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

有没有人尝试过类似的事情?

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

这是我们正在加载js文件的index.jsp.

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>

以及我们将GeoExt与Ext 3和Ext 4一起使用的地方:

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'
                    });
                }
            }
        });
    }
});

屏幕截图

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

FireBug-错误-控制台 http://img33.imageshack.us/img33/3703/errorsp.png

推荐答案

我们在解决了许多问题后进行了管理:

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"/>

现在可以将GeoExt MapPanel加载到Ext 4容器中.

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

现在我们的问题是CSS文件似乎可以作为ext-all-gray.css

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

这篇关于如何在GeoExt中同时使用Ext 3和Ext 4?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆