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 RailsのTracにも同様のチケットがあります。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