Ext.WindowをDragできる範囲ついて

[Mari]

現在、Iframeで２画面に区切られた親画面から、Ext.Windowで定義した子画面をモーダルとして表示しています。
呼び出し元の親画面の範囲内のみDragを許可し、外の範囲へはDragできないようにしたいのが要望なのですが、
現在、以下のような現象となっています。

①Ext.WindowのHeader部分の、titleが表示されていない空白部を選択し、Dragした場合　
　　⇒　外の範囲へはDrag Dropできない
②Ext.WindowのHeader部分の、titleが表示されてるSPAN部を選択しDragした場合
　　⇒　外の範囲へDrag Dropできる

Ext.Windowは、以下のプロパティを設定しています。
　draggable：true,
　title:'画面タイトル',
　modal:true

同じheader内ですが、選択した部分によってDrag Dropできる範囲が変わってしまいます。
制御する方法をご存知の方いらっしゃいましたら回答よろしくお願いします。

[yuki]

現在、Iframeで２画面に区切られた親画面から、Ext.Windowで定義した子画面をモーダルとして表示しています。

ちょっと試してみたのですが、再現できなかったので、もう少し詳しく状況を教えてください
（「Iframeで2画面に区切られた親画面」の解釈がちょっと違うのかも）。

できればサンプルコードがあるといいかもです:)

[Mari]

簡単ですが、サンプル画面を作成してみました。
外枠の画面だけになります。
中のiframe部分には、Ext.windowのサンプル画面を表示します。

添付のsample.htmlを、ext-2.2.1\examples\window以下に配置して、実行してみてください。
　※ちなみに、iframeに表示するsrcを、直接以下のURL指定にしてしまうと、現象が発生しませんでした。
　　そのため、必ずローカルの環境に配置して実行してください。
　　src="http://extjs.com/deploy/dev/examples/window/hello.html"

以下、発生環境・手順になります。
◆環境
ブラウザ：IE6
◆手順
①添付のsample.htmlをext-2.2.1\examples\window以下に配置し、IE6で表示
②iframe内の「Hello World」ボタンを押下し、 Ext.windowモーダル画面を表示
③②のモーダル画面のヘッダー部分の、「Hello Dialog」と書かれている文字の部分をクリックし、Drag開始
④ゆっくりと真上にDragすると、上部のフレーム枠を超えて、どこまでもDragできてしまう。
※③のクリックする部分が、「Hello Dialog」と書かれていない空白部分の場合、現象は発生しません。
　また、もしかすると、起動直後1回目は、発生しないかも知れませんので、何度か試してみてください。

よろしくお願いします。

[yuki]

回答が遅くなってしまいました:)

頂いたサンプルで確認したのですが、



③②のモーダル画面のヘッダー部分の、「Hello Dialog」と書かれている文字の部分をクリックし、Drag開始
④ゆっくりと真上にDragすると、上部のフレーム枠を超えて、どこまでもDragできてしまう。
※③のクリックする部分が、「Hello Dialog」と書かれていない空白部分の場合、現象は発生しません。


上記で「どこまでもDragできてしまう」というのは、正確にはWindowがフレーム枠を「越える」のではなく、フレーム内の「見えない座標」、つまり表示部分の外までDragできてしまう、という理解でよろしいでしょうか？（フレームを「越える」という表現だとWindowがフレームから飛び出して親フレーム上に表示されるという風にイメージしてしまうので）

上記理解でよければ、確かにIE上で上記のような現象を確認できました（ちなみに、FF3では発生せず、Safari3ではどの部分を選択してもどこまでもDragできました）。

この現象の解決にはいくつか方法が考えられますが、一番簡単な方法は下記の通りです：


// winはExt.Windowのインスタンス
var dd = win.dd;
dd.constrainTo(Ext.getBody());


「.dd」というのはExt.Windowをdraggableにしたときに利用できるプロパティで、Ext.dd.DDのインスタンスです。このddプロパティによりwinのDrag&Drop操作は管理されています。
dd.constrainToを呼び出すことによりDrag可能な範囲を予め限定することが可能です。上記例では、bodyタグの中に限定しています。

サンプル (http://extjssamples-jp.googlecode.com/svn/trunk/dd/constrainto.html)も作ってみましたのでご覧下さい。

[Mari]

ご回答ありがとうございます。
ご回答いただきました「dd指定」で、指定範囲内のみDrag　Drop可能になることを確認しました。

今後とも、よろしくお願いいたします。