如何使用Ext 3和Ext 4來創建GeoExt？

我們正在嘗試加載Ext 3和Ext 4，並使用ext-all-sandbox.js以便能夠在Ext 4中使用GeoExt。如何使用Ext 3和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與擴展3和分機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' 
        }); 
       } 
      } 
     }); 
    } 
});

截圖

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

螢火 - 錯誤 - 控制檯 http://img33.imageshack.us/img33/3703/errorsp.png

來源

2011-11-10 Emil

事件的看法，在網頁中加載ExtJs **兩次**看起來很奇怪......它已經非常沉重。 – tonio

我明白了你的觀點，可以說讓IE8不能在DOM中處理很多問題，這會是一個問題嗎？ – Emil

我們管理的很多問題後解決它：

<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加載到分機4容器。

現在我們的問題是，dosent的CSS文件似乎爲EXT-全gray.css

工作如果妳的球員，有有如果技術上可行約，這將是非常讚賞

來源

2011-11-11 07:10:32 Emil

如何使用Ext 3和Ext 4來創建GeoExt？

回答

相關問題