How To dynamically hide/show one TwinTriggerField trigger

[marrrck]

Hi Everyone,

I'm very new to GXT but I'm working on a proof-of-concept port of an existing Ext JS/Stripes app to GXT. In our existing app we have a search box that uses a twin trigger field, and we only show the second trigger (cancel button) after the user has typed something in the box. We have this working in Ext JS, but I haven't figured out how to do it in GXT. I've got an event listener that changes the trigger field style class but it doesn't seem to be sticking. I'm hoping it is something else I'm just forgetting to call to get the style change to actually take effect?

public class SearchTwinTriggerField extends TwinTriggerField<String> {

  public SearchTwinTriggerField() {
    super();
    setTriggerStyle("dx-form-search-trigger");
    hideClearTrigger();
    setFieldLabel("Search");

    KeyListener keyListener = new KeyListener() {

      @Override
      public void componentKeyPress(ComponentEvent event) {
        if (!event.isSpecialKey()) {
          showClearTrigger();
        }
      }

    };
    addKeyListener(keyListener);
  }

  public void showClearTrigger() {
    setTwinTriggerStyle("dx-form-clear-trigger");
// tried all of these but nothing seems to work.
    repaint();
    show();
    render(getElement());
  }

  public void hideClearTrigger() {
    setTwinTriggerStyle("dx-form-clear-trigger-hide");
  }
}

I've also tried updating the style on the trigger field (not the twin trigger) but that didn't help either. I've also tried using the hide methods on TriggerField, but that seems to hide both the buttons.

Any help would be greatly appreciated

[sven]

It would be something like this:

class SearchTwinTriggerField extends TwinTriggerField<String> {

  public SearchTwinTriggerField() {
    super();
    setTriggerStyle("dx-form-search-trigger");
    setTwinTriggerStyle("dx-form-clear-trigger");
    setFieldLabel("Search");

    final DelayedTask task = new DelayedTask(new Listener<BaseEvent>() {
      public void handleEvent(BaseEvent be) {
        if (getRawValue() != null && getRawValue().length() > 0) {
          showClearTrigger();
        } else {
          hideClearTrigger();
        }
      }
    });

    KeyListener keyListener = new KeyListener() {
      @Override
      public void componentKeyPress(ComponentEvent event) {
        task.delay(100);
      }

    };
    addKeyListener(keyListener);
  }

  public void showClearTrigger() {
    twinTrigger.removeStyleName("dx-form-clear-trigger-hide");
    twinTrigger.setStyleAttribute("display", "");
    syncSize();
  }

  @Override
  protected Size adjustInputSize() {
    return new Size(isHideTrigger() ? 0
        : ((trigger.isVisible(false) ? trigger.getStyleSize().width : 0) + (twinTrigger.isVisible(false)
            ? twinTrigger.getStyleSize().width : 0)), 0);
  }

  @Override
  protected void onRender(Element target, int index) {
    super.onRender(target, index);

    hideClearTrigger();
  }

  public void hideClearTrigger() {
    twinTrigger.addStyleName("dx-form-clear-trigger-hide");
    twinTrigger.hide();
    syncSize();
  }
}

[marrrck]

Thanks for the quick reply sven! That worked like a charm. I should have checked the source for those protected variables! Thanks for your help!

[chalu]

This is also related to what I've been wanting to do, which is to change the trigger / drop-down icon of a combo when it's been loaded to something that reflects that state, guess I'll just have to add a listener to the store and use setTriggerStyle() to change the icon appropriately.

Just some questions about this :
Is there a ready-to-use css rule to show the loading state, like there is "dx-form-search-trigger" for search.

Do I have to make a subclass just for this, Ext Js has the idea of "overrides" where I can setup code to override a behavior in a class causing all instances of that class to have the override. That way this can be one without sub-classing.

[sven]

Changing the triggericon is much easier. Simple add/remove an additional classname to the trigger element that sets another background image.

[chalu]

Yes seven, but doing this manually for every combo can be tedious, would be better to do it once (attaching the store listener and changing the icon when needed) and have all combos behave that way, but it appears that with Java the only way to inherit implementation is via subclassing, is there any other construct, I am thinking of making this a topic in GWT open discussion forum, Thanks

[sven]

When you want to change the behaviour, you need to subclass it. But that should not be a problem. You only need to subclass it once and use this new class everywhere.

[chalu]

Yeah, you are absolutely correct, but I'll now be required to change all instances of ComboBox to the new one (maybe XComboBox).

[GEqui]

Could you guys please provide some details on how i :
"Simple add/remove an additional classname to the trigger element that sets another background image"

Thanx lots