PDA

View Full Version : Ext.form.ComboBoxに自動で適用されるCSS(x-form-text)について



Mari
9 Apr 2009, 4:37 AM
現在、Ext.form.ComboBox(インクリメンタルサーチ)を使用した画面を作成しています。
Ext.form.ComboBoxは、画面が初期表示される際ではなく、ユーザーがExt.form.ComboBoxの項目にonfocusした時点でloadするような仕様です。(初期表示時の負荷を減らすため。)

そこで問題なのですが、Ext.form.ComboBoxがはじめてloadされた際、x-form-textというスタイルクラスが自動で設定されてしまいます。
Ext.form.ComboBoxのfocusイベントで、即座にremoveClass('x-form-text');を行うのですが、
removeClassを行うまでの一瞬の間、x-form-textが適用されてしまうため、
Ext.form.ComboBoxを適用しているテキストボックスのheightなどが変化したり、
そのテキストボックスに初期値が設定されていた場合は、その文字列が上下にずれてみえたりしてしまいます。
(x-form-textのpaddingや、line-heightの影響。)
 ※初期表示でloadしていないため、画面の見た目が変わってしまうのがわかってしまいます。

x-form-textをload時に適用しないような設定はありますでしょうか?
ご存知の方がいらっしゃいましたら、回答よろしくお願いします。

Kazuhiro Kotsutsumi
9 Apr 2009, 5:30 PM
具体的にためしたわけじゃないんですが、手軽な方法として、クラスを作ればよいのではないでしょうか。

ComboBoxにIDを指定するか、外側のCSSクラスと連携するかですが、例えば、ComboBoxにID:testComboを指定したとして

#testCombo .x-form-text {
// 無効化するコード
}

そうでなければ、comboBoxクラスのrenderメソッドをオーバーライドするかになると思います。

参考になれば。

silkyblack
12 Apr 2009, 6:11 PM
ご回答いただきまして、ありがとうございます。
クラスを作成した場合、うまく制御することが出来ました。

しかし、今回こちらで作成しているExt.form.ComboBox(インクリメンタルサーチ)は、共通部品の扱いのため、
IDも使用する画面によって個々に定義されています。(本部品には、引数としてIDを受け取ります。)

そのため、できればクラスを直接書き換えずに、プロパティなど、設定値で解決できれば一番良いのですが・・・。
そのようなプロパティは存在しないのでしょうか?

Kazuhiro Kotsutsumi
12 Apr 2009, 7:43 PM
Ext.form.ComboBoxのclsコンフィグオプションでクラスを指定するか・・・。
style コンフィグオプションで直接CSSを設定するか・・・。

くらいでしょうか?