hagino3000's blog

平成アーカイブス (更新停止)

Ext.jsのext-prototype-adapter.jsのエラーを出なくする


2008-11-04追記:↓完全に修正されてませんでした……orz
2008-10-07追記:この問題はprototype.js 1.6.0.3で修正されました。


Ext.jsをprototype.jsベースで使用した場合にIE6, IE7で発生するエラーに対応する方法。

prototype.jsベースの構成にした場合jsファイルのincludeは次の通りになります。

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="ext-prototype-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>


ただし、このままだとIE6, IE7のonload時にprototype.jsの3777行目辺りでエラーが発生して使い物になりません。原因はprototype.jsのバグ*1なのでExt JSサイドとしては対応しない方針の様です。

幸い回避策がExt JS Forumsに挙がっています*2ので、以下の通りに修正用のコードをprototype.jsのinculude直後に仕込めばOK。これでIE6, IE7でもまともに使えるようになります。

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="prototype.js"></script>
<script>
if(window.Event) {
    Object.extend(Event,{
        element: function(event) {
          var node = Event.extend(event).target;
          return node && Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
        },

        pointer: function(event) {
          return {
            x: event.pageX || (event.clientX +
              ((document && document.documentElement && document.documentElement.scrollLeft)
                  || (document && document.body && document.body.scrollLeft))),
            y: event.pageY || (event.clientY +
              ((document && document.documentElement && document.documentElement.scrollTop)
                  || (document && document.body && document.body.scrollTop)))
          };
        }
    });
}
</script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="ext-prototype-adapter.js"></script>
<script type="text/javascript" src="ext-all.js"></script>

*1:Ruby on RailsTracにも同様のチケットがあります。http://dev.rubyonrails.org/ticket/10100

*2:[2.0rc1][SOLVED] prototype's Event.pointerX problem when document.body is null - Ext JS Forums http://extjs.com/forum/showthread.php?t=17107