1. #41
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    635
    Vote Rating
    15
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default


    I tested the basic override code and it operates the same in ExtJS 4.2 as it does in ExtJS 4.1...


    So, this solution needs more work. On the otherhand, the plugin works very well for both versions.


    I happen to prefer the override method, but it needs work.
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...
    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.
    ================================================
    Simple. Enjoy.

  2. #42
    Sencha User
    Join Date
    Apr 2007
    Location
    Ettlingen, Germany
    Posts
    65
    Vote Rating
    0
    Mark is on a distinguished road

      0  

    Default ExtJs 4.2. labelAlign

    ExtJs 4.2. labelAlign


    Quote Originally Posted by Mark View Post
    Does anybody run this great plugin with ExtJs 4.2.?
    I think the structure of the fields has changed in this version and therefore the small cross does'nt show at the proper position.
    Could anybody help?
    I add some changes to the plugin to choose the proper css-class depending on which position the label set
    PHP Code:
    /**
             * Creates the Element and DOM for the clear button
             */
            
    createClearButtonEl: function() {
                var 
    animateWithClass this.animateClearButton && this.animateWithCss3;

                if(
    this.textField.labelAlign == 'top'){
                 
    this.clearButtonEl this.textField.bodyEl.createChild({
                    
    tag'div',
                    
    clsthis.clearButtonCls '-labeltop'
                 
    });
                }
                else
                {
                    
    this.clearButtonEl this.textField.bodyEl.createChild({
                    
    tag'div',
                    
    clsthis.clearButtonCls
                
    });
                }
                if(
    this.animateClearButton) {
                    
    this.animateWithCss3 this.supportsCssTransition(this.clearButtonEl);
                }
                if(
    this.animateWithCss3) {
                    
    this.clearButtonEl.addCls(this.clearButtonCls '-off');
                }
                else {
                    
    this.clearButtonEl.setStyle('visibility''hidden');
                }
            } 
    and add another class to the stylesheet ClearButton.css

    PHP Code:
    .ext-ux-clearbutton-labeltop {
        
    width12px;
        
    height12px;
        
    background-imageurl(assets/clear-text-red-icon.gif);
        
    background-position0 0;
        
    background-repeatno-repeat;
         -
    moz-user-focusignore/* https://developer.mozilla.org/en/CSS/-moz-user-focus */
        
    cursorpointer;
        
    position:absolute;
        
    overflow:  hidden/* IE 6 :-( */
        
    margin-top26px/*if labelAlign "top" */
        
    background-colorwhite;

    This solution works for me quiet perfect.

  3. #43
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    635
    Vote Rating
    15
    lorezyra will become famous soon enough lorezyra will become famous soon enough

      0  

    Default


    @mark,


    This is much cleaner...
    PHP Code:
            /**
             * Creates the Element and DOM for the clear button
             */
            
    createClearButtonEl: function() {
                var 
    animateWithClass this.animateClearButton && this.animateWithCss3;
                var 
    labelAlign "";
                
                if(
    this.textField.labelAlign == 'top'){ labelAlign "-labeltop"; }
                
                
    this.clearButtonEl this.textField.bodyEl.createChild({
                    
    tag'div',
                    
    clsthis.clearButtonCls labelAlign
                
    });
                if(
    this.animateClearButton) {
                    
    this.animateWithCss3 this.supportsCssTransition(this.clearButtonEl);
                }
                if(
    this.animateWithCss3) {
                    
    this.clearButtonEl.addCls(this.clearButtonCls '-off');
                }
                else {
                    
    this.clearButtonEl.setStyle('visibility''hidden');
                }
            }, 
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!
    ================================================
    And here are my terms...
    1. I don't care if you use my source code. (Known as "Code.")
    2. I don't care if I get any monetary compensation.
    3. I do care to receive credit for Code provided. So, please keep my name in the comments for Code provided.
    4. Code is provided without warranty "AS-IS" and I claim absolutely no warranty nor liability to the quality, security, and run-ability on any platform.
    5. By using Code, you accept all risk inherit with Code regardless if Code has known and yet to be discovered bugs.
    6. You are welcome to change and improve the Code to best meet your needs.
    7. I don't care if you use the Code in a commercial or open-source project.
    8. You are not required to contact me prior to using the Code.
    ================================================
    Simple. Enjoy.

  4. #44
    Sencha Premium Member
    Join Date
    May 2009
    Posts
    7
    Vote Rating
    0
    User 0815 is on a distinguished road

      0  

    Default


    I think, all what it needs to correctly place the clearbutton icon are the instructions of this post from PHaroZ :

    http://www.sencha.com/forum/showthre...l=1#post713053

    If you then change the line
    Code:
    clearButtonEl.alignTo(this.textField.bodyEl, 'tr-tr', [-1 * (right + 3), 5]);
    with
    Code:
    clearButtonEl.alignTo(this.textField.inputEl, 'tr-tr', [-1 * (right + 3), 5]);
    it should work with ExtJS 4.0.x, 4.1.x and 4.2.x (also with labelAlign: top).

  5. #45
    Sencha User
    Join Date
    Apr 2007
    Location
    Ettlingen, Germany
    Posts
    65
    Vote Rating
    0
    Mark is on a distinguished road

      0  

    Default


    @lorezyra

    I agree!

  6. #46
    Sencha User
    Join Date
    Apr 2007
    Location
    Ettlingen, Germany
    Posts
    65
    Vote Rating
    0
    Mark is on a distinguished road

      0  

    Default


    @0815 Neat!

    To use this solution I think it's not necessary to getTriggerWidth()
    Therefor:
    PHP Code:
    /* if (this.textField.triggerWrap) {
                        right += this.textField.getTriggerWidth();
                    }*/ 

  7. #47
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    133
    Vote Rating
    5
    anton.dimitrov is on a distinguished road

      0  

    Default


    Has anybody tried the plugin for fields inside a 'fieldset' or 'fieldcontainer'.
    I get a very weird bug with FF that the button is positioned at the top right corner of the 'fieldcontainer'
    instead in the field. I can't believe I am saying this but IE 9 actually works better than FF and doesn't show the bug, nor does Chrome.

    I tested 4.1 and 4.2 but the behavior is the same.
    I also tried the overwrite for 4.2 and the issue still presented itself.

    Am I missing something? Has anybody encountered this behavior before ?

    Link:

    http://jsfiddle.net/ms4UC/10/

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

      0  

    Default


    Try adding layout: 'vbox' to your fieldset. I tried it quickly in your jsfiddle, and it worked... mostly. Give it a try and you'll see. I use this plugin (and have been since Stephen posted it) on fields within a fieldcontainer, and it works fine for me in Firefox, IE6, IE7, IE8 and Chrome, so it is possible!

  9. #49
    Ext JS Premium Member anton.dimitrov's Avatar
    Join Date
    Nov 2011
    Location
    The Netherlands
    Posts
    133
    Vote Rating
    5
    anton.dimitrov is on a distinguished road

      0  

    Default


    10x for the replay!

    Indeed using 'hbox' or 'vbox' layouts does the trick but
    layouts 'auto', 'column', 'anchor' don't get the right position and maybe others as well.
    I didn't test them all.

    Have you used it any of the above layouts ?

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

      0  

    Default


    Just quickly checked my code. I'm using it either in vbox or hbox layouts, and primarily within "fieldcontainers" with hbox layouts. I haven't been following the updates in this thread very closely, but in case it is helpful, my version of the plugin is at https://gist.github.com/aghuddleston/5513157. I'm using it w/4.1.1.