1. #1
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default Ext.ux.form.field.ClearButton - Small clear button/icon over field

    Ext.ux.form.field.ClearButton - Small clear button/icon over field


    A plugin for text fields (as well as date fields, combo boxes and text areas) that shows a small "clear button" in the text field when the mouse is over the field.

    Demo and download page

    This is a small feature, but initially I had totally under-estimated the effort to implement it.
    Well, I have probably over-engineered the solution a little what with the animation option to fade in/out the icon and other config options ;-)

    Feedback welcome!
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  2. #2
    Sencha User
    Join Date
    Apr 2009
    Posts
    48
    Vote Rating
    0
    morfeusz is on a distinguished road

      0  

    Default


    very good, thanks

  3. #3
    Touch Premium Member
    Join Date
    Jul 2008
    Posts
    28
    Vote Rating
    0
    johnleroux is on a distinguished road

      0  

    Default


    Very very good plugins. Thanks!!!!

  4. #4
    Sencha User Remy's Avatar
    Join Date
    Apr 2008
    Posts
    297
    Vote Rating
    0
    Remy is on a distinguished road

      0  

    Thumbs up


    Very nice and elegant.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    64
    Vote Rating
    0
    ZeusTheTrueGod is on a distinguished road

      0  

    Default


    Cute, but pretty useless plugin imlementation from a usability point of view.

    The 'X' button should be always visible else it is hard to use it.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Argentina
    Posts
    36
    Vote Rating
    0
    gustavo21 is on a distinguished road

      0  

    Default


    How could add a store reload when i clear a textfield? I wanna use it for filters, and when i clear a textfield the store is reload...

    Thanks.

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92
    Vote Rating
    1
    kveeiv is on a distinguished road

      0  

    Default


    Quote Originally Posted by ZeusTheTrueGod View Post
    The 'X' button should be always visible else it is hard to use it.
    Please see the documentation the author has included. This option is available through the configuration options "hideClearButtonWhenEmpty" and "hideClearButtonWhenMouseOut". Setting both to false should give you the functionality you desire.

    Quote Originally Posted by stephen.friedrich View Post
    Feedback welcome!
    This is great. It is nice to be able to throw this plugin on to any textfield based input and be able to have a consistent means of clearing the field's value.

    A few small notes:
    * Your CSS references a custom image for the clear button (in a relative parent path), but this image is not linked to from the download page. I would move the image in to the same folder (or a subfolder instead of a parent), and compress the 3 files in to an archive that can be easily downloaded.

    * Some fields might be rendered already by the time this plugin is activated (like when existing input fields are being transformed to extjs fields), which causes this plugin not to register properly. This can be overcome with a simple fix to init(). Additionally, handleAfterRender does not need the parameter it has listed, since the textfield is referenced off of 'this'.

    Code:
    init: function(textField) {
      this.textField = textField;
      if (!textField.rendered) {
        textField.on('afterrender', this.handleAfterRender, this);
      } else {
        this.handleAfterRender();
      }
    },
    * In an effort to get this compatible with the next version of the BoxSelect component, I modified the calculation of the clear button positioning to be "right" based instead of "left". I believe that this change improves positioning for all fields for both always-on and hover-on cases, using the examples/form/combos.html and examples/form/field-types.html pages for testing. Textareas still suffer from text overlap, but overall they seem to behave better and more consistently between browsers.

    Code:
    /**
            * Repositions the clear button element based on the textfield.inputEl element
            * @private
            */
           repositionClearButton: function() {
               var clearButtonEl = this.clearButtonEl;
               if (!clearButtonEl) {
                   return;
               }
               var clearButtonPosition = this.calculateClearButtonPosition(this.textField);
               clearButtonEl.dom.style.right = clearButtonPosition.right + 'px';
               clearButtonEl.dom.style.top = clearButtonPosition.top + 'px';
           },
    
           /**
            * Calculates the position of the clear button based on the textfield.inputEl element
            * @private
            */
           calculateClearButtonPosition: function(textField) {
               var positions = textField.inputEl.getBox(true, true);
               var top = positions.y;
    		   var right = positions.x;
               if(this.fieldHasScrollBar()) {
                   right += Ext.getScrollBarWidth();
               }
    		   if(this.textField.triggerWrap) {
    			   right += this.textField.getTriggerWidth();
    		   }
               return {
                   right: right,
                   top: top
               };
           },
    This plugin is cleanly implemented in a way that made these changes easy to make, and works as expected across all textfield-based classes, well done!
    Last edited by kveeiv; 13 Jun 2011 at 9:28 AM. Reason: (copied modifications from original, woops)

  8. #8
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    Quote Originally Posted by ZeusTheTrueGod View Post
    Cute, but pretty useless plugin imlementation from a usability point of view.

    The 'X' button should be always visible else it is hard to use it.
    Have a close look at the docs. Your requirement is already exactly documented:
    Ext.override(Ext.ux.form.ClearButton, {hideClearButtonWhenEmpty: false});
    IMHO it depends on your specific use case. If you want to have the clear button at a lot of text fields, then I think its better to have it only on mouse over because else it would clutter the UI too much.
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  9. #9
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    @kveeiv: Thanks a lot for your detailed remarks!
    I totally forgot about the button, the point about fields already being rendered is very valid and the new positioning makes sense. I'll updated the plugin shortly.

    Now I have to prepare a little for our ExtJS User Group meeting this evening...
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

  10. #10
    Ext JS Premium Member
    Join Date
    Jul 2009
    Posts
    239
    Vote Rating
    2
    stephen.friedrich will become famous soon enough

      0  

    Default


    I have uploaded a new version with changes as proposed by kveeiv.

    Also fading in/out of the clear button now uses CSS3 transitions where supported - because when you moved the mouse quickly in/out of a field the ExtJS animation is jumpy.
    (Oh, well ok, mostly just for the fun of it and to learn CSS3 ;-)
    ExtJS 4 plugins:
    varheaders - short/normal/long column header
    clearbutton - mouseover clear button in text field
    Blog: fit4dev
    ExtJS User Group Hamburg

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar