1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
    Snahrck is an unknown quantity at this point

      0  

    Default How to create a FileUploadField with a clear button trigger

    How to create a FileUploadField with a clear button trigger


    I tried to adapt the code of this thread with no success:

    http://www.sencha.com/forum/showthread.php?83895-ComboBox-with-a-possibility-to-clear-value&p=743472#post743472

    Anyone knows how to do this or could point me to the right direction?

    Thanks in advance.

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
    Snahrck is an unknown quantity at this point

      0  

    Default


    I think I am almost there, but I'm facing two problems:

    1 - I could not get the size of the trigger to adjust the size of the input accordingly so I set it to 25
    2 - (most important) My trigger never gets the focus and clicking over it fires up the browse button.

    Code:
    public class FileUploadFieldWithClear extends FileUploadField {
    
        protected El trigger;
    
    
        private final String triggerStyle = "x-form-clear-trigger";
        private El span;
    
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            
            //Could not read the value of the trigger width so I set it to 25
            getInputEl().setWidth(getInputEl().getWidth() - 25, true);
        }
        
        @Override
        protected void afterRender() {
            super.afterRender();
            addStyleOnOver(trigger.dom, "x-form-trigger-over");
        }
    
    
        @Override
        protected void onRender(Element target, int index) {
    
    
            trigger = new El(DOM.createImg());
            trigger.dom.setClassName("x-form-trigger " + triggerStyle);
            trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
    
            span = new El(DOM.createSpan());
            span.dom.setClassName("x-form-triggers");
    
    
            span.appendChild(trigger.dom);
    
    
            super.onRender(target, index);
            
            el().appendChild(span.dom);
            
            DOM.sinkEvents(trigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
        }
        
        @Override
        public void onComponentEvent(ComponentEvent ce) {
    
    
            super.onComponentEvent(ce);
            
            int type = ce.getEventTypeInt();
            //ce.getTarget() is never equal to trigger.dom
            if ((ce.getTarget() == trigger.dom) && (type == Event.ONCLICK)) {
                onTriggerClick(ce);
            }
        }
        
        protected void onTriggerClick(ComponentEvent ce) {
            setValue(null);
            clearInvalid();
            fireEvent(Events.TriggerClick, ce);
        }
    }
    Any comment is welcome.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
    Snahrck is an unknown quantity at this point

      0  

    Default I think i figured it out

    I think i figured it out


    The trigger was some how behind the other components, but still showing up.

    setting zindex did the trick: trigger.setZIndex(4);

    Here is the hole component including a fix to remove the "fakepath" from the inputfield:

    Code:
    package com.extjs.gxt.ui.client.widget.form;
    
    
    import com.extjs.gxt.ui.client.GXT;
    import com.extjs.gxt.ui.client.core.El;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.Events;
    import com.google.gwt.user.client.DOM;
    import com.google.gwt.user.client.Element;
    import com.google.gwt.user.client.Event;
    
    
    public class FileUploadFieldWithClear extends FileUploadField {
    
    
        protected El trigger;
    
    
        private final String triggerStyle = "x-form-clear-trigger";
        private El span;
    
    
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
    
    
            // Could not read the value of the trigger width so I set it to 25
            getInputEl().setWidth(getInputEl().getWidth() - 25, true);
        }
    
    
        @Override
        protected void afterRender() {
            super.afterRender();
            addStyleOnOver(trigger.dom, "x-form-trigger-over");
        }
    
    
        @Override
        protected void onRender(Element target, int index) {
    
            trigger = new El(DOM.createImg());
            trigger.dom.setClassName("x-form-trigger " + triggerStyle);
            trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
            span = new El(DOM.createSpan());
            span.dom.setClassName("x-form-triggers");
    
            span.appendChild(trigger.dom);
    
            super.onRender(target, index);
    
            el().appendChild(span.dom);
    
            DOM.sinkEvents(trigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
    
            //Added to fix focus problem
            trigger.setZIndex(4);
        }
    
    
        @Override
        public void onComponentEvent(ComponentEvent ce) {
             super.onComponentEvent(ce);
    
            int type = ce.getEventTypeInt();
            if ((ce.getTarget() == trigger.dom) && (type == Event.ONCLICK)) {
                onTriggerClick(ce);
            }
        }
    
         protected void onTriggerClick(ComponentEvent ce) {
            setValue(null);
            clearInvalid();
            fireEvent(Events.TriggerClick, ce);
        }
        
        // this is to remove the "fakepath" from the inputfield
        @Override
        protected void onChange(ComponentEvent ce) { 
            final String fullPath = getFileInput().getValue();
            final int lastIndex = fullPath.lastIndexOf('\\');
            final String fileName = fullPath.substring(lastIndex + 1);
            setValue(fileName);
        }
    }
    If you need to do something else, other than clearing the input field, just add a listner to the TriggerClick event:

    Code:
    fileUploadField.addListener(Events.TriggerClick, new Listener<ComponentEvent>() {
                public void handleEvent(ComponentEvent event) {
                    fileUploadField.setToolTip("Click 'Browse' to select a file");
                    fileUploadField.setEmptyText("No file selected");
                }
            });
    Se the attached image of the component.
    Attached Images

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    7
    Vote Rating
    -1
    Snahrck is an unknown quantity at this point

      0  

    Default


    This code works nice in chrome but the trigger appears misplaced in firefox.
    Here is a fix so that it works in both browsers (I have not tested this in any other):

    Code:
    	@Override
    	protected void onResize(int width, int height) {
    		super.onResize(width, height);
    
    
    		// Could not read the value of the trigger width so I use 25
    		getInputEl().setWidth(getInputEl().getWidth() - 25, true);
    		trigger.setLeft(getInputEl().getWidth());
    	}

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