Extjs 툴팁, IFrames 및 IE => 문제

OpenLayers, Extjs 및 GeoExt을 사용하는 응용 프로그램이 있습니다. 내 응용 프로그램이 잘 실행되지만 다른 페이지의 IFrame 안에 배치해야합니다. 이렇게하면 내 도구 모음은 의 Internet Explorer에서 반응이 없습니다.Extjs 툴팁, IFrames 및 IE => 문제

원인은 입니다. Ext.QuickTips.init();. 이 줄을 주석으로 처리하면 모든 것이 잘 작동합니다. - 빠른 팁 = 제외)

그러나 문제가있는 이유는 무엇입니까? 내가 잘못 사용했기 때문에 잘못되었거나 그냥 싫어하기 때문에 그렇습니까? Internet Explorer 및 IFrames?

링크 :

Link to the IFrame page

IFrame을 페이지 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <body> 
     <iframe height="660" src="http://www.gis34.dk/doctype.html" width="660"> 
      <p>This browser does not support <i>frames</i>.</p> 
     </iframe> 
    </body> 
</html>

응용 프로그램 페이지 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" language="javascript"> 
     var map; 
     var mapPanel; 
     var mainViewport; 
     var toolbarItems = []; 
    </script> 
    <link href="/Libraries/Ext/resources/css/ext-all.css" type="text/css" 
    rel="stylesheet" /> 
    <link href="/Libraries/GeoExt/resources/css/geoext-all-debug.css" type="text/css" 
    rel="stylesheet" /> 
    <link href="/CSS/Extjs.css" type="text/css" rel="stylesheet" /> 
    <link href="/CSS/OpenLayers.css" type="text/css" rel="stylesheet" /> 
    <link href="/CSS/Poseidon.css" type="text/css" rel="stylesheet" /> 
</head> 

<body> 
    <script src="/Libraries/OpenLayers/OpenLayers.js" type="text/javascript"></script> 
    <script src="/Libraries/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script> 
    <script src="/Libraries/Ext/ext-all-debug.js" type="text/javascript"></script> 
    <script src="/Libraries/GeoExt/lib/GeoExt.js" type="text/javascript"></script> 
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" 
    type="text/javascript"></script> 
    <div id="map"> 
    </div> 
    <script type="text/javascript"> 
     Ext.onReady(function() { 
      Ext.QuickTips.init(); // Uncomment this line! 

      Ext.BLANK_IMAGE_URL = '/Libraries/Ext/resources/images/default/s.gif'; 

      var layer = new OpenLayers.Layer.OSM.Mapnik('OpenStreetMap Mapnik', { 
       sphericalMercator: true 
      }, { 
       isBaseLayer: true 
      }); 

      var mapOptions = { 
       projection: 'EPSG:900913', 
       units: 'm', 
       maxExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372), 
       minResolution: '0.125', 
       maxResolution: '1000', 
       restrictedExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372), 
       controls: [ 
        ] 
      }; 
      map = new OpenLayers.Map('', mapOptions); 

      var Navigation = new OpenLayers.Control.Navigation(); 
      action = new GeoExt.Action({ 
       control: new OpenLayers.Control.ZoomBox({ 
        out: false 
       }), 
       map: map, 
       tooltip: "Zoom in", 
       iconCls: 'icon-zoom-in', 
       toggleGroup: 'mapTools', 
       group: 'mapTools' 
      }); 
      toolbarItems.push(action); 
      action = new GeoExt.Action({ 
       control: new OpenLayers.Control.ZoomBox({ 
        out: true 
       }), 
       map: map, 
       tooltip: "Zoom out", 
       iconCls: 'icon-zoom-out', 
       toggleGroup: 'mapTools', 
       group: 'mapTools' 
      }); 
      toolbarItems.push(action); 

      action = new GeoExt.Action({ 
       control: new OpenLayers.Control.ZoomToMaxExtent(), 
       map: map, 
       iconCls: 'icon-zoom-max-extent', 
       tooltip: 'Zoom helt ud' 
      }); 
      toolbarItems.push(action); 
      map.addControl(Navigation); 
      map.addLayer(layer); 

      mapPanel = new GeoExt.MapPanel({ 
       border: true, 
       id: 'mapPanel', 
       region: "center", 
       map: map, 
       tbar: toolbarItems 
      }); 
      mainViewport = new Ext.Viewport({ 
       layout: "fit", 
       hideBorders: true, 
       items: { 
        layout: "border", 
        deferredRender: false, 
        items: [ 
         mapPanel 
         ] 
       } 
      }); 
     }); 
    </script> 
</body> 
</html>

출처

2010-06-09 Chau

비슷한 문제가 발생했습니다. IE는 iframe에서 엉뚱한 동작을 보입니다.

문제는 요소의 마스크를 해제하는 것과 관련이있는 것으로 보입니다.

드래그 드롭 관리자가 문서의 mousedown에서 퀵 팁을 사용 중지 한 다음 마우스를 올려 놓으면 사용이 중지됩니다. 사용 가능으로 설정하면 요소를 마스크 해제하고 클래스를 제거하려고 시도합니다. 나는 정직하게 이유를 모른다.

어쨌든 unmask() 메서드에서 기존 마스크가 이미 있으면 removeClass 만 호출하도록 코드를 수정하십시오.

unmask : function(){ var me = this, dom = me.dom, mask = data(dom, 'mask'), maskMsg = data(dom, 'maskMsg'), hasMask;

 if(mask){ 
    if(maskMsg){ 
     maskMsg.remove(); 
      data(dom, 'maskMsg', undefined); 
    } 
    mask.remove(); 
     data(dom, 'mask', undefined); 
     hasMask = true; 
} 
if(hasMask){ 
     me.removeClass([XMASKED, XMASKEDRELATIVE]); 
    } 
}

출처

2010-06-10 04:59:02

글쎄, 나는 무엇을 찾아야할지 모릅니다. 오류가 발생하지 않으며 ExtJS에서이 레벨에서 어떻게 작동해야하는지 알고 싶지 않습니다. 어디를보아야하는지 힌트를 줄 수 있어요? 이것은 IE에서 문제가 되는가 아니면 IE와 IFrame을 지원할만큼 유연하지 않은 ExtJS입니까? 나는 다른 말로하면, 미래의 ExtJS 버전에 대한 해결책을 찾고 유지해야 할 것인가 아니면 일반적으로 ExtJS에서 구현해야 할 것인가? – Chau

예, SVN에서 수정되었습니다. ExtJS와는 아무 관련이 없습니다. IE에서 이상한 버그입니다. 답변을 업데이트했습니다. –

답변 해 주셔서 감사합니다. 이전 코드를 대체하는 * ext-all-debug.js *에 제안 된 코드를 삽입했습니다. 링크가 이제 수정 된 * ext-all-debug.js * 파일을 가리키고 있지만 여전히 작동하지 않습니다. 친절하게도 게시 한 코드보다 더 많은 것이 있습니까? 이 문제는 IE7과 IE8에서 모두 발생합니다. 아직 SVN에 대한 액세스 권한이 없지만 사장님이 라이선스 구매를 요청하면 즉시 변경해야합니다. :) – Chau

Extjs 툴팁, IFrames 및 IE => 문제

답변

관련 문제