1. #21
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    pretty nice plugin, thanks for sharing!
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  2. #22
    Ext JS Premium Member smcguire36's Avatar
    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    99
    Vote Rating
    0
    smcguire36 is on a distinguished road

      0  

    Default


    PHaroZ, nice fix to that problem! I just implemented this plugin and the first thing I discovered when I added it to my combo boxes was this problem. Your solution works great!

    Stewart McGuire
    Ext JS 2.x, 3.x, 4.x - Advanced User / Sencha Architect 3 - User

  3. #23
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    38
    Vote Rating
    0
    PHaroZ is on a distinguished road

      0  

    Default


    Don't work with Ext 4.1. To fix-it


    Code:
                repositionClearButton : function() {
                    var clearButtonEl = this.clearButtonEl;
                    if (!clearButtonEl) {
                        return;
                    }
                    var right = 0;
                    if (this.fieldHasScrollBar()) {
                        right += Ext.getScrollBarWidth();
                    }
                    if (this.textField.triggerWrap) {
                        right += this.textField.getTriggerWidth();
                    }
                    clearButtonEl.alignTo(this.textField.bodyEl, 'tr-tr', [-1 * (right + 3), 5]);
                },
    And remove "calculateClearButtonPosition" method.

  4. #24
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default


    can not work with extjs 4.1.0 beta 3

    error:

    Ext.core.Element.data is not a function
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  5. #25
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    In addition to PHaroZ changes above for 4.1.0, I commented out the following in updateClearButtonVisibility:

    PHP Code:
                    // Adjust padding-right of the input tag to make room for the button 
                   // IE (up to v9) just ignores this and Gecko handles padding incorrectly with  textarea scrollbars
    //                if (!(this.isTextArea && Ext.isGecko) && !Ext.isIE) {
    //                    // See https://bugzilla.mozilla.org/show_bug.cgi?id=157846
    //                    var deltaPaddingRight = clearButtonEl.getWidth() - this.clearButtonEl.getMargin('l');
    //                    var currentPaddingRight = this.textField.inputEl.getPadding('r');
    //                    var factor = (newVisible ? +1 : -1);
    //                    this.textField.inputEl.dom.style.paddingRight = (currentPaddingRight + factor * deltaPaddingRight) + 'px';
    //                } 
    Otherwise, when in Chrome in 18 or Firefox 11, if I moused over a field with no width set and managed by a hbox layout, the field would add extra padding to the right. For a combobox, it would look combo box, clearbutton, whitespace, triggerfield. But, removing above worked for me. I looked at in IE 8, Chrome 18 and Firefox 11. One disclaimer, I only have single line text fields, combo boxes or date fields using the clearbutton.

    Thanks for this extension.

  6. #26
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Quote Originally Posted by PHaroZ View Post
    Don't work with Ext 4.1. To fix-it


    Code:
                repositionClearButton : function() {
                    var clearButtonEl = this.clearButtonEl;
                    if (!clearButtonEl) {
                        return;
                    }
                    var right = 0;
                    if (this.fieldHasScrollBar()) {
                        right += Ext.getScrollBarWidth();
                    }
                    if (this.textField.triggerWrap) {
                        right += this.textField.getTriggerWidth();
                    }
                    clearButtonEl.alignTo(this.textField.bodyEl, 'tr-tr', [-1 * (right + 3), 5]);
                },
    And remove "calculateClearButtonPosition" method.
    thanks a lot PHaroZ for this fix, now it's working very well with ExtJS 4.1 too.
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  7. #27
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    133
    Vote Rating
    4
    demon222 is on a distinguished road

      0  

    Default


    fix if readOlny...

    PHP Code:

                
    if (oldVisible != newVisible && this.textField.readOnly !== true)  { 
    but if i dynamic change to readOnly: false

    not refresh combobox button X

    any help ?

    R

  8. #28
    Sencha User
    Join Date
    Jul 2011
    Location
    Russia
    Posts
    41
    Vote Rating
    3
    another_i is on a distinguished road

      0  

    Default


    Quote Originally Posted by demon222 View Post
    fix if readOlny...

    PHP Code:

                
    if (oldVisible != newVisible && this.textField.readOnly !== true)  { 
    but if i dynamic change to readOnly: false

    not refresh combobox button X

    any help ?

    R
    I have the same trouble.
    For quick decision you can try this code:
    Code:
    {
        xtype: "textfield",
        //...
        plugins: [{
            ptype: "clearbutton",
            pluginId: "clrbtn", //need for correct getPlugin function
            //...
        }]
    }
    //...
    
    var p = field.getPlugin("clrbtn");
    if(p!==undefined){
        p.clearButtonEl.stopAnimation();
        p.clearButtonEl.setVisible(false, p.animateClearButton); //or true for enable
    }
    But I think that I need two additional methods for this plugin:
    - enable();
    - disable().

    Thanks.

  9. #29
    Sencha User demon222's Avatar
    Join Date
    Jan 2008
    Location
    Poland, Warsaw
    Posts
    133
    Vote Rating
    4
    demon222 is on a distinguished road

      1  

    Default


    my solution ( this.repositionClearButton(); )
    PHP Code:

            updateClearButtonVisibility
    : function() {
                var 
    oldVisible this.isButtonCurrentlyVisible();
                var 
    newVisible this.shouldButtonBeVisible();

                var 
    clearButtonEl this.clearButtonEl;
                if (
    oldVisible != newVisible && this.textField.readOnly !== true) {
                    if(
    this.animateClearButton && this.animateWithCss3) {
                        
    this.clearButtonEl.removeCls(this.clearButtonCls + (oldVisible '-on' '-off'));
                        
    clearButtonEl.addCls(this.clearButtonCls + (newVisible '-on' '-off'));
                    }
                    else {
                        
    clearButtonEl.stopAnimation();
                        
    clearButtonEl.setVisible(newVisiblethis.animateClearButton);
                    }

                    
    // Set background-color of clearButton to same as field's background-color (for those browsers/cases
                    // where the padding-right (see below) does not work)
                    
    clearButtonEl.setStyle('background-color'this.textField.inputEl.getStyle('background-color'));

                    
    // Adjust padding-right of the input tag to make room for the button
                    // IE (up to v9) just ignores this and Gecko handles padding incorrectly with  textarea scrollbars
                    
    if (!(this.isTextArea && Ext.isGecko) && !Ext.isIE) {
                        
    // See https://bugzilla.mozilla.org/show_bug.cgi?id=157846
                        
    var deltaPaddingRight clearButtonEl.getWidth() - this.clearButtonEl.getMargin('l');
                        var 
    currentPaddingRight this.textField.inputEl.getPadding('r');
                        var 
    factor = (newVisible ? +: -1);
                        
    this.textField.inputEl.dom.style.paddingRight = (currentPaddingRight factor deltaPaddingRight) + 'px';
                    }
                    

                }
                
    this.repositionClearButton(); // <<<<<< this reposition creal button;-)
            
    }, 

  10. #30
    Sencha User
    Join Date
    Aug 2012
    Posts
    8
    Vote Rating
    0
    zhengeili is on a distinguished road

      0  

    Default


    thanks a lot .it's very nice.