1. #1
    Sencha Premium Member Kazuhiro Kotsutsumi's Avatar
    Join Date
    Sep 2007
    Location
    Japan
    Posts
    79
    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
    79
    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
    79
    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
    79
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi