|
|
|||||||
|
|
Thread Tools |
|
#1
|
||||
|
||||
|
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:
*/
|
|
#2
|
||||
|
||||
|
ナイス！！kazuhiroさん
同機能を使っているので、ＦＦで確認すると確かに現象が確認できました。で、kazuhiroさんのパッチを当てたら見事解決！ IE中心で確認していたので、非常にありがたいレスです。（しかも、パッチ付うれピー） Extは、全体的にIEより、FFのが安定していると思い込みがあり、ちょっと反省している今日この頃です。 Ext3.0では大丈夫なのかなぁ… |
|
#3
|
||||
|
||||
|
Quote:
今日現在の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:
*/
|
|
#4
|
||||
|
||||
|
FFCombo221.js のほうをいただきましたです。
|
|
#5
|
||||
|
||||
|
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:
*/
|
|
#6
|
||||
|
||||
|
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:
*/
|
«
Previous Thread
|
Next Thread
»
| Thread Tools | |
|
|
All times are GMT -5. The time now is 10:20 AM.