1. #1
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    81
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

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

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


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

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

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


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



    FFCombo221.js

    Code:
    /* 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. #2
    Sencha Premium Member amanoman's Avatar
    Join Date
    Oct 2007
    Location
    日本
    Posts
    49
    Vote Rating
    0
    amanoman is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    81
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default Ext3.0PreAlpha版

    Ext3.0PreAlpha版


    Quote Originally Posted by amanoman View Post
    ナイス!!kazuhiroさん
    同機能を使っているので、FFで確認すると確かに現象が確認できました。で、kazuhiroさんのパッチを当てたら見事解決!
    IE中心で確認していたので、非常にありがたいレスです。(しかも、パッチ付うれピー)
    Extは、全体的にIEより、FFのが安定していると思い込みがあり、ちょっと反省している今日この頃です。
    Ext3.0では大丈夫なのかなぁ…
    ということで、Ext 3.0用も作りました。
    今日現在のExt3.0 PreAlphaなんで、正式リリースしたらもう一回チェックが必要ですが。


    FFCombo300.js

    Code:
    /* 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. #4
    Ext User
    Join Date
    Jan 2009
    Posts
    79
    Vote Rating
    0
    kiyoto01 is on a distinguished road

      0  

    Thumbs up いただきます。

    いただきます。


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

  5. #5
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    81
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default Ext JS 3.0 RC1対応版

    Ext JS 3.0 RC1対応版


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

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

    Code:
    /* 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. #6
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    81
    Vote Rating
    1
    Kazuhiro Kotsutsumi is on a distinguished road

      0  

    Default


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


    Code:
    /* 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:
     */

Thread Participants: 2