ComboBoxが公式ページのサンプルと自サーバで違う動作をする(IE8)

**adapco** · 12 Apr 2012 7:55 AM

この現象について解る方がいらっしゃいましたら教えて下さい

sencha.comからextjsの4.0.7GPL版をダウンロードして自サーバに展開して使用しています
examples/formディレクトリの combos.js サンプルをベースに作成したサンプルを開くと変な挙動をしました

ConboBoxの下向き矢印をクリックすると、最初の１回目は正しくボックスの下に表示されますが
２回目以降はページの左上隅からリストが表示されてしまいます
この現象は IE8 でのみ確認できました、Chrome、Firefoxは期待通りの動作をします
自分のプログラムがおかしいと思ったのですが、なにも修正しないcombos.jsを開いても同じ動作をします

ただ、公式ページのサンプルは IE8 でも正しい動作をしました
IE8 の固有の問題なのかと思ったのですがそうでも無さそうです

自サーバは CentOS5 に XAMPP for Linux (1.4あたり?）を作動させています
サーバの問題とも思えないのですが・・

いったい何が原因なのか、あるいはどうやったら調べることが出来るのか
よろしく御願いします

**shobuno** · 12 Apr 2012 5:22 PM

試してみましたが、正常に動きました。
ん～不明ですね。

クライアント：
OS：WindowsXP SP3
IE：8.0.6001.18702
Ext：4.0.7-gpl

サーバー：
OS：Windows 2007
IIS：7.0

です。
記述されたHTMLソースを公開されてはどうでしょうか？

ちなみに、私の書いたコードはこんな感じです。(適当ですが…)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- ExtJS ベースCSS -->
        <link rel="stylesheet" type="text/css" href="../ext-4.0.7-gpl/resources/css/ext-all.css" media="all" />
<!-- ExtJS ベースライブラリ -->
        <script type="text/javascript" src="../ext-4.0.7-gpl/ext-all.js"></script>
        <script type="text/javascript" src="./combos.js"></script>
    </head>
    <body>
        <div id="simpleCombo"></div>
        <div id="customTplCombo"></div>
        <div id="multiSelectCombo"></div>
    </body>
</html>

…最後の「</html>」が表示されない。スクロールバーよ。仕事しろ(笑
プレビューでは表示されてるのに…駄目ジャン…

**adapco** · 12 Apr 2012 6:18 PM

shobuno様

検証していただきありがとうございます
ん～、正常に動きましたか、となるとサーバの問題なのでしょうか？
ちなみにサーバー情報間違っていました
OS：2.6.22.14-72.fc6
XAMPP：1.6.6
クライアント環境はshobuno様とまったく同じです

提供されるサンプルはそのまま使用しています、自分ではまったく修正しておりません
combos.html
combos.js

ちなみに公式ページのサンプルからもソースをコピペしてみましたが同じでした
イメージが湧かないかも知れませんので画像を載せます
最初に起動するとこんな感じに表示されます

combobox_first.jpg

ここで最上段の「Alabama」を選択して、もう一度下向き矢印をクリックすると
combobox_second.jpg

このように表示されてしまいます
ここで例えば「Florida」を選択してもcomboboxの窓には表示されません(される時もあります)
ただし選択はされているようで、もう一度下向き矢印をクリックすると「Florida」にフォーカスされています

サーバ環境なんでしょうか？
サーバを入れ替えてテストしてみます

**shobuno** · 12 Apr 2012 7:08 PM

再現した。

IEが互換性モードになってませんか？？？

互換性モードを解除してください。
直るはずです。

互換性モードじゃない場合は…
さらに謎です…

**adapco** · 12 Apr 2012 7:38 PM

shobuno様

再現しましたか！(妙に安心しました)
でも再現したと言うことはサーバの問題ではない・・

ちなみにIEは互換モードではありません
(互換モードに出来ません、と表示されます)

公式ページではフレーム表示になっているので
試しに簡単なフレームでやってみましたが同じでした

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>フレームテスト</title>
</head>
<frameset cols="25%,*">
<frame src="test.html" name="frame1">
<frame src="combos.html" name="frame2">
</frameset>
</html>

**shobuno** · 12 Apr 2012 8:10 PM

こちらでは、互換モード設定時に再現します。
非互換モードでは、正常に動作します。

余計に判らなくなりました…

下記URLで本当に互換モードに設定されていないか確認してもらえますか？
F12を押して、開発者モードを見れば判ります。

ブラウザーモード：IE8
ドキュメントモード：IE8 標準

になってますか？

互換モードかどうかを確認する方法が記述されています。
http://blogs.technet.com/b/jpieblog/...9/3280034.aspx

互換モードじゃない場合は、私にはお手上げです。

どなたかもっと詳しい人いませんか～～～

**adapco** · 12 Apr 2012 8:51 PM

shobuno様

互換モードでした！！
こういう確認方法があるとは知りませんでした

私の管理しているサーバにアクセスしてくる人はほぼ100％IE8の互換モードなので
教えていただいたページを参考にmetaタグで解決する方法を選択しました

本当に、本当に！！
ありがとうございました

**adapco** · 12 Apr 2012 9:10 PM

IE8の標準モードに指定することでcomboboxの問題は解決しましたが
comboboxの値を元に表示させているgridpanelの表示が崩れてしまいました

これは別の問題になりますのでここで質問は投げかけません
解決方法を模索してみます

・・・でも、もし解決方法をご存じでしたら教えてください

**shobuno** · 13 Apr 2012 1:49 AM

無事に解決できた様でよかったです
各ブラウザのデバッグモードを駆使してがんばってください。

ちなみに、GridPanelの表示が崩れるのは、
今までIE6(7) 用のHTMLでレイアウトを整えていたツケでしょう。

HTMLタグや、ExtならItemの指定場所、レイアウト、幅、高さ、CSSなどを調整すれば直ると思います。
(HTMLのタグの構成がどのようになっているかが重要だと思います)

パネルやCSSの継承関係もあるので、がんばってください。
(作り直したほうが早い時もあります(笑))

ちなみに、最新のFirefox の3D描画を見ると良いかも？
例：http://getnews.jp/archives/159870

**adapco** · 15 Apr 2012 4:47 PM

shobuno様

最後までフォローいただきありがとうございました

あれからいろいろ試してみて、IE8の
Document Mode: IE8(default: Quirks Mode)
Browser Mode: IE8(default: IE8 Compatibility View)
の場合に今のままできちんと表示されることがわかりました
しかしDocument Modeはmetaタグで指定できたのですが
Browser Modeを指定する方法がわからず(無いのかも知れません)
ご指摘のように、もう一度レイアウトを見直してみます
(IE8を止めてしまうのが一番手っ取り早いのですが、ユーザ側の問題なので)

Auroraの3D描画、凄いですね
ただ残念ながら私の環境ではボタンが表示されませんでした
WebGLということでしたのでなにかのモジュールが足りないか
ビデオカードが貧弱なのかも知れません
その前に私に使いこなせるかどうかが根本問題なのですが

また何かわからないことがありましたら別スレッドで質問させていただきます
ありがとうございました

ComboBoxが公式ページのサンプルと自サーバで違う動作をする(IE8)

Thread Tools

Search Thread

Display

ComboBoxが公式ページのサンプルと自サーバで違う動作をする(IE8)

ComboBoxが公式ページのサンプルと自サーバで違う動作をする(IE8)