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?

Code:
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