PDA

View Full Version : Ext.ToolTipをselect要素の上に表示したい



Mari
27 Apr 2009, 3:45 AM
お世話になります。
Ext.ToolTipを、select要素の上に表示させたいのですが、表示させようとすると
ToolTipの枠線の部分だけ、select要素の下にもぐってしまいます・・・。

z-Index用のext-shimのIFRAMEも自動で作成されているようですが、大きさが足りないようです。
何とか欠けずに表示することは出来ないでしょうか?

環境:IE6
※サンプルを添付しました。
IE6の環境で添付のhtmlを開き、[×]アイコンの上にmouseoverしてToolTipを表示してください。
 

yuki
27 Apr 2009, 5:09 AM
Ext.Tooltipのコンフィグオプションに、


floating:true

を設定してみてください。shimはfloating=trueじゃないと効かないはずなので。

Mari
27 Apr 2009, 5:29 AM
ご回答ありがとうございます。
解決できました。
shimはfloating=trueじゃないと効かないのですね。
また、よろしくお願いします!

Mari
30 Apr 2009, 9:17 PM
たびたびお世話になります。
ToolTipの件、前回、floating:trueの設定で解決したかに思われましたが、表示する位置によって
また枠が切れてしまうパターンがでてしまいました。
SELECT要素が、ちょうどToolTipの下側の枠にかかった場合、枠が欠けてしまいます。

今回は、本当にshimが少し小さいのが原因だと思うのですが・・・。
良い解決方法はございますでしょうか?

サンプルを添付いたします。
環境:IE6
ご参照下さい。

よろしくお願いいたします。

yuki
30 Apr 2009, 11:49 PM
shim(=iframe)のサイズがきちんと計算されていないためにおこっているみたいです。
試しにTooltipではなく、Ext.Windowを作って、selectタグ上に持って行っても同じように下のボーダー部分が1ピクセル分消えてしまってました:s

なので、やるとすれば、こんなかんじでしょうか(赤字部分がoverride箇所):

if(Ext.isIE6){
Ext.override(Ext.Layer, {
sync : function(doShow){
var sw = this.shadow;
if(!this.updating && this.isVisible() && (sw || this.useShim)){
var sh = this.getShim();

var w = this.getWidth(),
h = this.getHeight();

var l = this.getLeft(true),
t = this.getTop(true);

if(sw && !this.shadowDisabled){
if(doShow && !sw.isVisible()){
sw.show(this);
}else{
sw.realign(l, t, w, h);
}
if(sh){
if(doShow){
sh.show();
}
// fit the shim behind the shadow, so it is shimmed too
var a = sw.adjusts, s = sh.dom.style;
s.left = (Math.min(l, l+a.l))+"px";
s.top = (Math.min(t, t+a.t))+"px";
s.width = (w+a.w)+"px";
s.height = (h+a.h+1)+"px"; // ←ここ
}
}else if(sh){
if(doShow){
sh.show();
}
sh.setSize(w, h); ←このあたりも要調査&修正
sh.setLeftTop(l, t); ←このあたりも要調査&修正
}

}
}
});
}


上のコードに赤字で記載していますが、shadow=falseとした場合(デフォルトはtrue)の対応も必要そうです(試しにshadow=falseにすると、今度は左側のボーダー部分が5ピクセル分後ろにいってしまいます)。

Mari
1 May 2009, 12:18 AM
ご回答ありがとうございます。

やはり、少し短かったですか:-|
overrideを組み込み、解決できました。
ありがとうございました。