1. #1
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default ComboBox with a possibility to clear value

    ComboBox with a possibility to clear value


    I guess some people may find it usefull. The main problem with ComboBox is that there is no way to clear once selected value (if combobox is readonly). That's why I extended it with an additional clear button.

    Code:
    public class XComboBox<D extends ModelData> extends ComboBox<D> {
    
        protected El twinTrigger;
    
        private final String twinTriggerStyle = "x-form-clear-trigger";
        private El span;
    
        public XComboBox() {
            super();
        }
    
        @Override
        protected Size adjustInputSize() {
            return new Size(span.getWidth(), 0);
        }
    
        protected void afterRender() {
            super.afterRender();
            addStyleOnOver(twinTrigger.dom, "x-form-trigger-over");
        }
    
        @Override
        public void onComponentEvent(ComponentEvent ce) {
            super.onComponentEvent(ce);
            int type = ce.getEventTypeInt();
            if ((ce.getTarget() == twinTrigger.dom) && (type == Event.ONCLICK)) {
                onTwinTriggerClick(ce);
            }
        }
    
        @Override
        protected void onRender(Element target, int index) {
            input = new El(DOM.createInputText());
            setElement(DOM.createDiv(), target, index);
            addStyleName("x-form-field-wrap");
    
            trigger = new El(DOM.createImg());
            trigger.dom.setClassName("x-form-trigger " + triggerStyle);
            trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
            twinTrigger = new El(DOM.createImg());
            twinTrigger.dom.setClassName("x-form-trigger " + twinTriggerStyle);
            twinTrigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    
            span = new El(DOM.createSpan());
            span.dom.setClassName("x-form-twin-triggers");
    
            span.appendChild(trigger.dom);
            span.appendChild(twinTrigger.dom);
    
            el().appendChild(input.dom);
            el().appendChild(span.dom);
    
            if (isHideTrigger()) {
                span.setVisible(false);
            }
    
            super.onRender(target, index);
    
            if (!isEditable()) {
                setEditable(false);
            }
        }
    
        protected void onTwinTriggerClick(ComponentEvent ce) {
            boolean allowBlank = getAllowBlank();
            if (!allowBlank) {
                setAllowBlank(true);
            }
            setValue(null);
            setAllowBlank(allowBlank);
    
            fireEvent(Events.TwinTriggerClick, ce);
        }
    
    }
    Attached Images

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    protected Size adjustInputSize()

    Do you need this?
    I couldn't find this method in the parent classes...

    Are you sure this is needed?

    Regards,
    Michel.

  3. #3
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default


    It is in parent class (parent of ComboBox - TriggerField):

    Code:
      @Override
      protected Size adjustInputSize() {
        return new Size(trigger.getWidth(), 0);
      }

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    hmm...

    Gxt 2.0.1 does not have this... :-(

  5. #5
    Ext GWT Premium Member mariusz.pala's Avatar
    Join Date
    Jun 2008
    Location
    Poland
    Posts
    298
    Vote Rating
    2
    mariusz.pala is on a distinguished road

      0  

    Default


    Try extending onResize method:

    Code:
      @Override
      protected void onResize(int width, int height) {
        super.onResize(width, height);
        Size asize = adjustInputSize();
        getInputEl().setSize(width - asize.width, height - asize.height, true);
      }

  6. #6
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    Yeah.

    But other things are broken for 2.0.1.
    Unfortunately this does not work for 2.0.1 :-(

    Regards,
    Michel.

  7. #7
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    This is a solution for 2.0.1
    PS: this can be used for any class that extends TriggerField (ComboBox, DateField, TimeField, and so on).
    PS: this was based on the TwinTriggerField code.
    Code:
    public class XComboBox<D extends ModelData> extends ComboBox<D> {
    
        protected El twinTrigger;
        
        private final String twinTriggerStyle = "x-form-clear-trigger";
        private El span;
        
        @Override
        protected void onResize(int width, int height) {
            super.onResize(width, height);
            int tw = span.getWidth();
            if (width != Style.DEFAULT) {
                getInputEl().setWidth(width - tw);
            }
        }
        
        @Override
        protected void afterRender() {
            super.afterRender();
            addStyleOnOver(twinTrigger.dom, "x-form-trigger-over");
        }
        
        @Override
        public void onComponentEvent(ComponentEvent ce) {
            super.onComponentEvent(ce);
            int type = ce.getEventTypeInt();
            if ((ce.getTarget() == twinTrigger.dom) && (type == Event.ONCLICK)) {
                onTwinTriggerClick(ce);
            }
        }
        
        @Override
        protected void onRender(Element target, int index) {
            input = new El(DOM.createInputText());
            wrap = new El(DOM.createDiv());
            wrap.dom.setClassName("x-form-field-wrap");
            
            trigger = new El(DOM.createImg());
            trigger.dom.setClassName("x-form-trigger " + triggerStyle);
            trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
            
            twinTrigger = new El(DOM.createImg());
            twinTrigger.dom.setClassName("x-form-trigger " + twinTriggerStyle);
            twinTrigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
            
            span = new El(DOM.createSpan());
            span.dom.setClassName("x-form-twin-triggers");
            
            DOM.appendChild(span.dom, trigger.dom);
            DOM.appendChild(span.dom, twinTrigger.dom);
            
            DOM.appendChild(wrap.dom, input.dom);
            DOM.appendChild(wrap.dom, span.dom);
            
            setElement(wrap.dom, target, index);
            
            addStyleOnOver(twinTrigger.dom, "x-form-trigger-over");
            addStyleOnOver(trigger.dom, "x-form-trigger-over");
            
            if (isHideTrigger()) {
              span.setVisible(false);
            }
            
            super.onRender(target, index);
            
            if (!isEditable()) {
                setEditable(true);
                setEditable(false);
            }
            
            DOM.sinkEvents(twinTrigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
            DOM.sinkEvents(wrap.dom, Event.FOCUSEVENTS);
            DOM.sinkEvents(trigger.dom, Event.ONCLICK | Event.MOUSEEVENTS);
        }
        
        protected void onTwinTriggerClick(ComponentEvent ce) {
            setValue(null);
            clearInvalid();
            fireEvent(Events.TwinTriggerClick, ce);
        }
        
    }
    Regards,
    Michel.

  8. #8
    Ext User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    GaryP is on a distinguished road

      0  

    Default


    this code helped. thanks!

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

      0  

    Default


    Anyone know how can I do this with FileUploadField?

    I tried to adapt this code with no success.

    Thanks in advance.

Thread Participants: 3