ComboBox with a possibility to clear value

[mariusz.pala]

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.

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);
    }

}

[micgala]

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.

[mariusz.pala]

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

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

[micgala]

hmm...

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

[mariusz.pala]

Try extending onResize method:

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

[micgala]

Yeah.

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

Regards,
Michel.

[micgala]

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.

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.

[GaryP]

this code helped. thanks!

[Snahrck]

Anyone know how can I do this with FileUploadField?

I tried to adapt this code with no success.

Thanks in advance.