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!