編集不可能時のComboBoxカーソル対応 for FireFox

[Kazuhiro Kotsutsumi]

FireFoxでは、<input type="text" readonly=”readonly” />の場合、入力はできませんが、カーソルが表示されます。

Ext.form.ComboBoxは、コンフィグオプション：editableで編集可否を設定できます。
そのとき、内部的にreadonlyが設定されているため、FireFoxでExt.form.ComboBoxを使い、編集不可にしてもカーソルが表示されてしまいます。

これを回避するために、フォーカスが当たった時点でblurするようオーバーライドしました。
FFCombo221.jsを読み込むことで、上記の現象を回避させることが可能です。


下記のソースは、Ext 2.2.1用です。



FFCombo221.js


/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

// {{{ Ext.ux.override.FFCombo221

/**
* Ext.ux.override.FFCombo221
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
Ext.override( Ext.form.ComboBox, {

onRender : function( ct, position ) {

Ext.form.ComboBox.superclass.onRender.call(this, ct, position);

if( this.hiddenName ) {
this.hiddenField = this.el.insertSibling({
tag:'input',
type:'hidden',
name: this.hiddenName,
id: (this.hiddenId||this.hiddenName)
},'before', true);

// prevent input submission
this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}

if(!this.lazyInit){
this.initList();
}else{
this.on('focus', this.initList, this, {single: true});
}

if(!this.editable){
this.editable = true;
this.setEditable(false);
}

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.el.on(
'focus',
function(){
this.blur();
}
);
}

}
});

/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/

[amanoman]

ナイス！！kazuhiroさん
同機能を使っているので、ＦＦで確認すると確かに現象が確認できました。で、kazuhiroさんのパッチを当てたら見事解決！
IE中心で確認していたので、非常にありがたいレスです。（しかも、パッチ付うれピー）
Extは、全体的にIEより、FFのが安定していると思い込みがあり、ちょっと反省している今日この頃です。
Ext3.0では大丈夫なのかなぁ…

[Kazuhiro Kotsutsumi]

ナイス！！kazuhiroさん
同機能を使っているので、ＦＦで確認すると確かに現象が確認できました。で、kazuhiroさんのパッチを当てたら見事解決！
IE中心で確認していたので、非常にありがたいレスです。（しかも、パッチ付うれピー）
Extは、全体的にIEより、FFのが安定していると思い込みがあり、ちょっと反省している今日この頃です。
Ext3.0では大丈夫なのかなぁ…

ということで、Ext 3.0用も作りました。
今日現在のExt3.0 PreAlphaなんで、正式リリースしたらもう一回チェックが必要ですが。


FFCombo300.js


/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

// {{{ Ext.ux.override.FFCombo300

/**
* Ext.ux.override.FFCombo300
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
Ext.override( Ext.form.ComboBox, {

onRender : function( ct, position ) {

Ext.form.Checkbox.superclass.onRender.call(this, ct, position);
if(this.inputValue !== undefined){
this.el.dom.value = this.inputValue;
}
this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
if(this.boxLabel){
this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
}
if(this.checked){
this.setValue(true);
}else{
this.checked = this.el.dom.checked;
}

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.el.on(
'focus',
function(){
this.blur();
}
);
}

}
});

/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/

[kiyoto01]

FFCombo221.js のほうをいただきましたです。

[Kazuhiro Kotsutsumi]

RC1でたんで、対応しました。
オーバーライドする場所が変わっています。

ちなみに、下記のコードで、2.2.1および3.0RC1両方対応できます。


/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

// {{{ Ext.ux.override.FFCombo

/**
* Ext.ux.override.FFCombo
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
if( Ext.version === '2.2.1' ) {

// Ext JS 2.2.1
Ext.override( Ext.form.ComboBox, {

onRender : function( ct, position ) {

Ext.form.ComboBox.superclass.onRender.call(this, ct, position);

if( this.hiddenName ) {
this.hiddenField = this.el.insertSibling({
tag:'input',
type:'hidden',
name: this.hiddenName,
id: (this.hiddenId||this.hiddenName)
},'before', true);

// prevent input submission
this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}

if(!this.lazyInit){
this.initList();
}else{
this.on('focus', this.initList, this, {single: true});
}

if(!this.editable){
this.editable = true;
this.setEditable(false);
}

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.el.on(
'focus',
function(){
this.blur();
}
);
}
}

});

} else if( Ext.version === '3.0' ) {

// Ext JS 3.0
Ext.override( Ext.form.ComboBox, {

initEvents : function(){
Ext.form.Checkbox.superclass.initEvents.call(this);
this.mon(this.el, 'click', this.onClick, this);
this.mon(this.el, 'change', this.onClick, this);

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {

this.mon(this.el, 'focus', function(){
this.blur();
}, this );
}

}

});

}

/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/

[Kazuhiro Kotsutsumi]

Ext JS 3.0用と2.2.1両対応。
地味に、RC1でExt.form.ComboBoxのinitEventsが書き換わってたので修正しました。
コチラを使ってください。
じゃないと、ComboBoxをクリックしたときに、「fn is undefined」といエラーがでちゃいます。



/* vim: set expandtab tabstop=4 shiftwidth=4 softtabstop=4: */

// {{{ Ext.ux.override.FFCombo

/**
* Ext.ux.override.FFCombo
*
* コンボボックス編集不可能時にFireFoxでカーソルが表示される現象を回避
*
* @author Kazuhiro Kotsutsumi <kotsutsumi@xenophy.com>
*/
if( Ext.version === '2.2.1' ) {

// Ext JS 2.2.1
Ext.override( Ext.form.ComboBox, {

onRender : function( ct, position ) {

Ext.form.ComboBox.superclass.onRender.call(this, ct, position);

if( this.hiddenName ) {
this.hiddenField = this.el.insertSibling({
tag:'input',
type:'hidden',
name: this.hiddenName,
id: (this.hiddenId||this.hiddenName)
},'before', true);

// prevent input submission
this.el.dom.removeAttribute('name');
}
if(Ext.isGecko){
this.el.dom.setAttribute('autocomplete', 'off');
}

if(!this.lazyInit){
this.initList();
}else{
this.on('focus', this.initList, this, {single: true});
}

if(!this.editable){
this.editable = true;
this.setEditable(false);
}

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {
this.el.on(
'focus',
function(){
this.blur();
}
);
}
}

});

} else if( Ext.version === '3.0' ) {

// Ext JS 3.0
Ext.override( Ext.form.ComboBox, {

initEvents : function(){

Ext.form.ComboBox.superclass.initEvents.call(this);

this.keyNav = new Ext.KeyNav(this.el, {
"up" : function(e){
this.inKeyMode = true;
this.selectPrev();
},

"down" : function(e){
if(!this.isExpanded()){
this.onTriggerClick();
}else{
this.inKeyMode = true;
this.selectNext();
}
},

"enter" : function(e){
this.onViewClick();
this.delayedCheck = true;
this.unsetDelayCheck.defer(10, this);
},

"esc" : function(e){
this.collapse();
},

"tab" : function(e){
this.onViewClick(false);
return true;
},

scope : this,

doRelay : function(foo, bar, hname){
if(hname == 'down' || this.scope.isExpanded()){
return Ext.KeyNav.prototype.doRelay.apply(this, arguments);
}
return true;
},

forceKeyDown : true
});
this.queryDelay = Math.max(this.queryDelay || 10,
this.mode == 'local' ? 10 : 250);
this.dqTask = new Ext.util.DelayedTask(this.initQuery, this);
if(this.typeAhead){
this.taTask = new Ext.util.DelayedTask(this.onTypeAhead, this);
}
if(this.editable !== false){
this.mon(this.el, 'keyup', this.onKeyUp, this);
}
if(this.forceSelection){
this.on('blur', this.doForce, this);
}

// FireFoxの場合で、かつ編集できないときにカーソル非表示対応
if( !this.editable && Ext.isGecko ) {

this.mon(this.el, 'focus', function(){
this.blur()
}, this );
}

}

});

}

/*
* Local variables:
* tab-width: 4
* c-basic-offset: 4
* c-hanging-comment-ender-p: nil
* End:
*/