Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

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

      1  

    Default


    complete source :

    PHP Code:
    (function() {
        
    /**
         * @class Ext.ux.form.field.ClearButton
         *
         * Plugin for text components that shows a "clear" button over the text field.
         * When the button is clicked the text field is set empty.
         * Icon image and positioning can be controlled using CSS.
         * Works with Ext.form.field.Text, Ext.form.field.TextArea, Ext.form.field.ComboBox and Ext.form.field.Date.
         *
         * Plugin alias is 'clearbutton' (use "plugins: 'clearbutton'" in GridPanel config).
         *
         * @author <a href="mailto:stephen.friedrich@fortis-it.de">Stephen Friedrich</a>
         * @author <a href="mailto:fabian.urban@fortis-it.de">Fabian Urban</a>
         *
         * @copyright (c) 2011 Fortis IT Services GmbH
         * @license Ext.ux.form.field.ClearButton is released under the
         * <a target="_blank" href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.
         *
         */
        
    Ext.define('Ext.ux.form.field.ClearButton', {
            
    alias'plugin.clearbutton',

            
    /**
             * @cfg {Boolean} Hide the clear button when the field is empty (default: true).
             */
            
    hideClearButtonWhenEmptytrue,

            
    /**
             * @cfg {Boolean} Hide the clear button until the mouse is over the field (default: true).
             */
            
    hideClearButtonWhenMouseOuttrue,

            
    /**
             * @cfg {Boolean} When the clear buttons is hidden/shown, this will animate the button to its new state (using opacity) (default: true).
             */
            
    animateClearButtontrue,

            
    /**
             * @cfg {Boolean} Empty the text field when ESC is pressed while the text field is focused.
             */
            
    clearOnEscapetrue,

            
    /**
             * @cfg {String} CSS class used for the button div.
             * Also used as a prefix for other classes (suffixes: '-mouse-over-input', '-mouse-over-button', '-mouse-down', '-on', '-off')
             */
            
    clearButtonCls'ext-ux-clearbutton',

            
    /**
             * The text field (or text area, combo box, date field) that we are attached to
             */
            
    textFieldnull,

            
    /**
             * Will be set to true if animateClearButton is true and the browser supports CSS 3 transitions
             * @private
             */
            
    animateWithCss3false,

            
    /////////////////////////////////////////////////////////////////////////////////////////////////////
            //
            // Set up and tear down
            //
            /////////////////////////////////////////////////////////////////////////////////////////////////////

            
    constructor: function(cfg) {
                
    Ext.apply(thiscfg);

                
    this.callParent(arguments);
            },

            
    /**
             * Called by plug-in system to initialize the plugin for a specific text field (or text area, combo box, date field).
             * Most all the setup is delayed until the component is rendered.
             */
            
    init: function(textField) {
                   
                
    this.textField textField;
                if (!
    textField.rendered) {
                    
    textField.on('afterrender'this.handleAfterRenderthis);
                }
                else {
                    
    // probably an existing input element transformed to extjs field
                    
    this.handleAfterRender();
                }
            },

            
    /**
             * After the field has been rendered sets up the plugin (create the Element for the clear button, attach listeners).
             * @private
             */
            
    handleAfterRender: function(textField) {
                
    /*
                 * Disable on pagingtoolbar !
                 **/
                
    if(typeof(textField.ownerCt) !== 'undefined' ) {
                    if(
    textField.ownerCt.xtype === 'pagingtoolbar') {
                        return;
                    }
                }
                
    this.isTextArea = (this.textField.inputEl.dom.type.toLowerCase() == 'textarea');

                
    this.createClearButtonEl();
                
    this.addListeners();

                
    this.repositionClearButton();
                
    this.updateClearButtonVisibility();

                
    this.addEscListener();
            },

            
    /**
             * Creates the Element and DOM for the clear button
             */
            
    createClearButtonEl: function() {
                var 
    animateWithClass this.animateClearButton && this.animateWithCss3;
                
    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');
                }
            },

            
    /**
             * Returns true iff the browser supports CSS 3 transitions
             * @param el an element that is checked for support of the "transition" CSS property (considering any
             *           vendor prefixes)
             */
            
    supportsCssTransition: function(el) {
                var 
    styles = ['transitionProperty''WebkitTransitionProperty''MozTransitionProperty',
                              
    'OTransitionProperty''msTransitionProperty''KhtmlTransitionProperty'];

                var 
    style el.dom.style;
                for(var 
    0length styles.lengthlength; ++i) {
                    if(
    style[styles[i]] !== 'undefined') {
                        
    // Supported property will result in empty string
                        
    return true;
                    }
                }
                return 
    false;
            },

            
    /**
             * If config option "clearOnEscape" is true, then add a key listener that will clear this field
             */
            
    addEscListener: function() {
                if (!
    this.clearOnEscape) {
                    return;
                }

                
    // Using a KeyMap did not work: ESC is swallowed by combo box and date field before it reaches our own KeyMap
                
    this.textField.inputEl.on('keydown',
                    function(
    e) {
                        if (
    e.getKey() == Ext.EventObject.ESC) {
                            if (
    this.textField.isExpanded) {
                                
    // Let combo box or date field first remove the popup
                                
    return;
                            }
                            
    // No idea why the defer is necessary, but otherwise the call to setValue('') is ignored
                            
    Ext.Function.defer(this.textField.setValue1this.textField, ['']);
                            
    e.stopEvent();
                        }
                    },
                    
    this);
            },

            
    /**
             * Adds listeners to the field, its input element and the clear button to handle resizing, mouse over/out events, click events etc.
             */
            
    addListeners: function() {
                
    // listeners on input element (DOM/El level)
                
    var textField this.textField;
                var 
    bodyEl textField.bodyEl;
                
    bodyEl.on('mouseover'this.handleMouseOverInputFieldthis);
                
    bodyEl.on('mouseout'this.handleMouseOutOfInputFieldthis);

                
    // listeners on text field (component level)
                
    textField.on('destroy'this.handleDestroythis);
                
    textField.on('resize'this.repositionClearButtonthis);
                
    textField.on('change', function() {
                    
    this.repositionClearButton();
                    
    this.updateClearButtonVisibility();
                }, 
    this);

                
    // listeners on clear button (DOM/El level)
                
    var clearButtonEl this.clearButtonEl;
                
    clearButtonEl.on('mouseover'this.handleMouseOverClearButtonthis);
                
    clearButtonEl.on('mouseout'this.handleMouseOutOfClearButtonthis);
                
    clearButtonEl.on('mousedown'this.handleMouseDownOnClearButtonthis);
                
    clearButtonEl.on('mouseup'this.handleMouseUpOnClearButtonthis);
                
    clearButtonEl.on('click'this.handleMouseClickOnClearButtonthis);
            },

            
    /**
             * When the field is destroyed, we also need to destroy the clear button Element to prevent memory leaks.
             */
            
    handleDestroy: function() {
                
    this.clearButtonEl.destroy();
            },

            
    /////////////////////////////////////////////////////////////////////////////////////////////////////
            //
            // Mouse event handlers
            //
            /////////////////////////////////////////////////////////////////////////////////////////////////////

            /**
             * Tada - the real action: If user left clicked on the clear button, then empty the field
             */
            
    handleMouseClickOnClearButton: function(eventhtmlElementobject) {
                if (!
    this.isLeftButton(event)) {
                    return;
                }
                
    this.textField.setValue('');
                
    this.textField.focus();
            },

            
    handleMouseOverInputField: function(eventhtmlElementobject) {
                
    this.clearButtonEl.addCls(this.clearButtonCls '-mouse-over-input');
                if (
    event.getRelatedTarget() == this.clearButtonEl.dom) {
                    
    // Moused moved to clear button and will generate another mouse event there.
                    // Handle it here to avoid duplicate updates (else animation will break)
                    
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-over-button');
                    
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-down');
                }
                
    this.updateClearButtonVisibility();
            },

            
    handleMouseOutOfInputField: function(eventhtmlElementobject) {
                
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-over-input');
                if (
    event.getRelatedTarget() == this.clearButtonEl.dom) {
                    
    // Moused moved from clear button and will generate another mouse event there.
                    // Handle it here to avoid duplicate updates (else animation will break)
                    
    this.clearButtonEl.addCls(this.clearButtonCls '-mouse-over-button');
                }
                
    this.updateClearButtonVisibility();
            },

            
    handleMouseOverClearButton: function(eventhtmlElementobject) {
                
    event.stopEvent();
                if (
    this.textField.bodyEl.contains(event.getRelatedTarget())) {
                    
    // has been handled in handleMouseOutOfInputField() to prevent double update
                    
    return;
                }
                
    this.clearButtonEl.addCls(this.clearButtonCls '-mouse-over-button');
                
    this.updateClearButtonVisibility();
            },

            
    handleMouseOutOfClearButton: function(eventhtmlElementobject) {
                
    event.stopEvent();
                if (
    this.textField.bodyEl.contains(event.getRelatedTarget())) {
                    
    // will be handled in handleMouseOverInputField() to prevent double update
                    
    return;
                }
                
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-over-button');
                
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-down');
                
    this.updateClearButtonVisibility();
            },

            
    handleMouseDownOnClearButton: function(eventhtmlElementobject) {
                if (!
    this.isLeftButton(event)) {
                    return;
                }
                
    this.clearButtonEl.addCls(this.clearButtonCls '-mouse-down');
            },

            
    handleMouseUpOnClearButton: function(eventhtmlElementobject) {
                if (!
    this.isLeftButton(event)) {
                    return;
                }
                
    this.clearButtonEl.removeCls(this.clearButtonCls '-mouse-down');
            },

            
    /////////////////////////////////////////////////////////////////////////////////////////////////////
            //
            // Utility methods
            //
            /////////////////////////////////////////////////////////////////////////////////////////////////////

            /**
             * 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(truetrue);
                var 
    top positions.y;
                var 
    right positions.x;
                if (
    this.fieldHasScrollBar()) {
                    
    right += Ext.getScrollBarWidth();
                }
                if (
    this.textField.triggerWrap) {
                    
    right += this.textField.getTriggerWidth();
                }
                return {
                    
    rightright,
                    
    toptop
                
    };
            },

            
    /**
             * Checks if the field we are attached to currently has a scrollbar
             */
            
    fieldHasScrollBar: function() {
                if (!
    this.isTextArea) {
                    return 
    false;
                }

                var 
    inputEl this.textField.inputEl;
                var 
    overflowY inputEl.getStyle('overflow-y');
                if (
    overflowY == 'hidden' || overflowY == 'visible') {
                    return 
    false;
                }
                if (
    overflowY == 'scroll') {
                    return 
    true;
                }
                
    //noinspection RedundantIfStatementJS
                
    if (inputEl.dom.scrollHeight <= inputEl.dom.clientHeight) {
                    return 
    false;
                }
                return 
    true;
            },


            
    /**
             * Small wrapper around clearButtonEl.isVisible() to handle setVisible animation that may still be in progress.
             */
            
    isButtonCurrentlyVisible: function() {
                if (
    this.animateClearButton && this.animateWithCss3) {
                    return 
    this.clearButtonEl.hasCls(this.clearButtonCls '-on');
                }

                
    // This should not be necessary (see Element.setVisible/isVisible), but else there is confusion about visibility
                // when moving the mouse out and _quickly_ over then input again.
                
    var cachedVisible Ext.core.Element.data(this.clearButtonEl.dom'isVisible');
                if (
    typeof(cachedVisible) == 'boolean') {
                    return 
    cachedVisible;
                }
                return 
    this.clearButtonEl.isVisible();
            },

            
    /**
             * Checks config options and current mouse status to determine if the clear button should be visible.
             */
            
    shouldButtonBeVisible: function() {
                if (
    this.hideClearButtonWhenEmpty && Ext.isEmpty(this.textField.getValue())) {
                    return 
    false;
                }

                var 
    clearButtonEl this.clearButtonEl;
                
    //noinspection RedundantIfStatementJS
                
    if (this.hideClearButtonWhenMouseOut
                    
    && !clearButtonEl.hasCls(this.clearButtonCls '-mouse-over-button')
                    && !
    clearButtonEl.hasCls(this.clearButtonCls '-mouse-over-input')) {
                    return 
    false;
                }

                return 
    true;
            },

            
    /**
             * Called after any event that may influence the clear button visibility.
             */
            
    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();
            },

            
    isLeftButton: function(event) {
                return 
    event.button === 0;
            }

        });

    })(); 

  2. #32
    Sencha Premium Member
    Join Date
    Mar 2010
    Posts
    101
    Vote Rating
    -2
    predator has a little shameless behaviour in the past

      0  

    Default


    @Author, please consider adding following event handler:
    PHP Code:
    textField.on('readonly'this.handleDestroythis); 
    @Sencha, please consider firing event readonly on method setReadOnly() for various input controllers.

    Thank you.

  3. #33
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    vyomkesh.tiwari is on a distinguished road

      0  

    Default


    I am not able to use your plugin in my code. Can you please give some editor link where i can see you running code , like Jsfiddle. I want to know where i am using your code wrongly. I am new to extjs please help.
    Thanks,
    Vyom

  4. #34
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    vyomkesh.tiwari is on a distinguished road

      0  

    Default


    I used the plugin in my code and it gave me error - Ext.define is not a function and Ext.ux.form is undefined


    Can you help me with these errors.

  5. #35
    Sencha User
    Join Date
    Oct 2011
    Location
    Dubai
    Posts
    7
    Vote Rating
    0
    apastakia is on a distinguished road

      0  

    Default


    i found a config property in the doc for Ext.form.field.Text which states the following
    clearCls : String
    The CSS class to be applied to the special clearing div rendered directly after the field contents wrapper to provide field clearing.

    Defaults to: Ext.baseCSSPrefix + 'clear'

    Available since: 4.0.7
    this had me totally confused thinking im not configuring the textfield properly, but having read this post it seems i would have to use a plugin if i want to have a X button to provide field clearing.

    so why does Ext.form.field.Text class have clearCls since 4.0.7 ?

  6. #36
    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

    ExtJS 4.2


    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?

  7. #37
    Sencha User
    Join Date
    Oct 2011
    Location
    Dubai
    Posts
    7
    Vote Rating
    0
    apastakia is on a distinguished road

      0  

    Default


    ExtJS 4.2

    Overridden the field.Base class to add clear icon functionality

    Javascript
    Code:
    Ext.override(Ext.form.field.Base, {
       showClear: false,
    
       afterRender: function () {
        if (this.showClear && !this.xtype.contains('checkbox') && !this.xtype.contains('radio')) {
         if (Ext.isEmpty(this.inputCell))
          this.__clearDiv = this.bodyEl.insertHtml('beforeEnd', '<div class="x-clear"></div>', true);
         else
          this.__clearDiv = this.inputCell.insertHtml('beforeEnd', '<div class="x-clear"></div>', true);
    
         this.__clearDiv.setVisible(!Ext.isEmpty(this.getValue()));
         this.__clearDiv.on('click', this.clearField, this);
        }
       },
    
       onChange: function () {
        this.callParent(arguments);
        if (!Ext.isEmpty(this.__clearDiv)) this.__clearDiv.setVisible(!Ext.isEmpty(this.getValue()));
       },
    
       clearField: function () {
        this.setValue(null);
        this.clearInvalid();
        this.focus();
       }
      });
    Style
    Code:
    .x-form-item-body .x-clear {
       position: absolute;
       top: 4px;
       right: 2px;
       width: 16px;
       height: 16px;
       display: none;
       cursor: pointer;
       opacity: 0.2;
       filter: alpha(opacity=20);
       background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGASURBVDiNrZOxThthEIRn9ipegCgVHQVyEclxzi34rIODFwiVS3fELQ9AS9JRuuIJiHMnn1tky1iisCjSpQHZL+DKOyngpLNFkKww9c7+8+3+S0koKzoOdwO3UyeqlKoAIHJiwmRpfp3/HP0u17NoQJLRUXhG4QLAFl7XQsR5/mv0Qy9GSgJJNg/DGwDJP4zr6vXT0YkkGQBER+HZBmYASF48YCP5smvO+1LsPy5rm3kXwodnPszcrWX0KwA7BY6bPlngdlpmdlk7T29TBw4AzAHMHTjI09vUZe1Sii06vpoT1XI2M+9GSX0v7w0f6MsGfdnIe8OHKKnvmXl3BYT2mc3D8BHAxzXGOX3ZyLLxFADiuFaRBQMA22t1T7bB4F6ViZysxsLMif0sG0/juFaJ41oly8ZTJ/ZBzMqlIidmwkoDd2sVzLJgIAsGxUzcrbXymPzuv9dISWgm9W8ULjdhF9Hp94bf3+crS1I/HZ2I6ABYvGFciOgUZqB0jYU2Pee/yjnfEUKuaMMAAAAASUVORK5CYII=');
      }
    
       .x-form-item-body .x-clear:hover {
        opacity: 0.5;
        filter: alpha(opacity=50);
       }
    
      .x-form-item-body .x-form-trigger-input-cell .x-clear {
       right: 24px;
      }
    Test
    Code:
    Ext.widget({
       xtype: 'container',
       layout: 'vbox',
       defaults: { labelWidth: 120, showClear: true },
       items: [
       { xtype: 'textfield', fieldLabel: 'Textfield', value: 'Test Me' },
       { xtype: 'textarea', fieldLabel: 'Textarea' },
       { xtype: 'combobox', fieldLabel: 'Combobox' },
       { xtype: 'numberfield', fieldLabel: 'Numberfield' },
       { xtype: 'datefield', fieldLabel: 'Datefield' },
       { xtype: 'checkbox', fieldLabel: 'Checkbox' }
       ],
       renderTo: document.body
      });

  8. #38
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    574
    Vote Rating
    6
    lorezyra will become famous soon enough

      0  

    Default


    You guys are awesome! Thanks for this clever widget!
    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!

  9. #39
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    574
    Vote Rating
    6
    lorezyra will become famous soon enough

      0  

    Default


    Quote Originally Posted by stephen.friedrich View Post
    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!



    I prefer the embedded image instead of a GIF sprite.
    [thanks to apastakia for the CSS]


    Here's my CSS that works well for the EXTJS 4.1 version of this plugin...
    Code:
    .ext-ux-clearbutton {
        width: 16px;
        height: 16px;
        /* background-image: url(clear-text-icon.gif); */ /* 12 x 12 "X" */
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGASURBVDiNrZOxThthEIRn9ipegCgVHQVyEclxzi34rIODFwiVS3fELQ9AS9JRuuIJiHMnn1tky1iisCjSpQHZL+DKOyngpLNFkKww9c7+8+3+S0koKzoOdwO3UyeqlKoAIHJiwmRpfp3/HP0u17NoQJLRUXhG4QLAFl7XQsR5/mv0Qy9GSgJJNg/DGwDJP4zr6vXT0YkkGQBER+HZBmYASF48YCP5smvO+1LsPy5rm3kXwodnPszcrWX0KwA7BY6bPlngdlpmdlk7T29TBw4AzAHMHTjI09vUZe1Sii06vpoT1XI2M+9GSX0v7w0f6MsGfdnIe8OHKKnvmXl3BYT2mc3D8BHAxzXGOX3ZyLLxFADiuFaRBQMA22t1T7bB4F6ViZysxsLMif0sG0/juFaJ41oly8ZTJ/ZBzMqlIidmwkoDd2sVzLJgIAsGxUzcrbXymPzuv9dISWgm9W8ULjdhF9Hp94bf3+crS1I/HZ2I6ABYvGFciOgUZqB0jYU2Pee/yjnfEUKuaMMAAAAASUVORK5CYII=');
        background-position: 0 0;
        background-repeat: no-repeat;
        -moz-user-focus: ignore; /* https://developer.mozilla.org/en/CSS/-moz-user-focus */
        cursor: pointer;
        position: absolute;
        overflow:  hidden; /* IE 6 :-( */
        margin: 0px;
        background-color: white;
    }
    
    .ext-ux-clearbutton-mouse-over-input {
       /* background-position: 0 -12px; */
    }
    
    .ext-ux-clearbutton-mouse-over-button {
       /* background-position: 0 -24px; */
    }
    
    .ext-ux-clearbutton-mouse-down {
       /* background-position: 0 -36px; */
    }
    
    .ext-ux-clearbutton-on {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s linear;
        -webkit-transition: opacity .35s linear;
        -moz-transition: opacity .35s linear;
        -o-transition: opacity .35s linear;
        -ms-transition: opacity .35s linear;
        -khtml-transition: opacity .35s linear;
    }
    
    .ext-ux-clearbutton-off {
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s linear, visibility .0s linear .35s;
        -webkit-transition: opacity .35s linear, visibility .0s linear .35s;
        -moz-transition: opacity .35s linear, visibility .0s linear .35s;
        -o-transition: opacity .35s linear, visibility .0s linear .35s;
        -ms-transition: opacity .35s linear, visibility .0s linear .35s;
        -khtml-transition: opacity .35s linear, visibility .0s linear .35s;
    }
    This makes it nicer to use in Sencha Architect.
    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!

  10. #40
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    574
    Vote Rating
    6
    lorezyra will become famous soon enough

      0  

    Default


    @apastakia,


    Your override works okay... But it fails to position the clear button correctly when the label is above the base field or when the parent container is wider than the actual field... Also, when you have components with similar itemId strings (e.g. "Password" and "Password0") it attaches the clearButton to the first match instead of the exact match.


    I'll see if I can find a fix for these.. Otherwise this works well enough for ExtJS 4.1.3.
    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!