com.extjs.gxt.ui.client.widget.form.TriggerField Maven / Gradle / Ivy

Go to download
/*
 * Sencha GXT 2.3.1a - Sencha for GWT
 * Copyright(c) 2007-2013, Sencha, Inc.
 * [email protected]
 * 
 * http://www.sencha.com/products/gxt/license/
 */
 package com.extjs.gxt.ui.client.widget.form;

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.DomEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.event.PreviewEvent;
import com.extjs.gxt.ui.client.util.BaseEventPreview;
import com.extjs.gxt.ui.client.util.Size;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.DeferredCommand;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Event;

/**
 * Provides a convenient wrapper for TextFields that adds a clickable trigger
 * button (looks like a combobox by default).
 * 
 * 
 * Events:
 * 
 * TriggerClick : FieldEvent(field, event)

 * Fires after the trigger is clicked.
 * 
 * field : this
 * event : event
 * 
 * 
 * 
 * 
 * 
 * Inherited Events:
 * Field Focus
 * Field Blur
 * Field Change
 * Field Invalid
 * Field Valid
 * Field KeyPress
 * Field SpecialKey
 * 
 */
@SuppressWarnings("deprecation")
public class TriggerField extends TextField {

  protected BaseEventPreview focusEventPreview;
  protected El trigger;
  protected String triggerStyle = "x-form-trigger-arrow";
  protected boolean mimicing;

  private boolean editable = true;
  private boolean monitorTab = true;
  private boolean hideTrigger;

  public TriggerField() {
    super();
  }

  /**
   * Returns the trigger style.
   * 
   * @return the trigger style
   */
  public String getTriggerStyle() {
    return triggerStyle;
  }

  /**
   * Returns true if the combo is editable.
   * 
   * @return true if editable
   */
  public boolean isEditable() {
    return editable;
  }

  /**
   * Returns true if the trigger is hidden.
   * 
   * @return the hide trigger state
   */
  public boolean isHideTrigger() {
    return hideTrigger;
  }

  /**
   * Returns true if tab key events are being monitored.
   * 
   * @return true if monitoring
   */
  public boolean isMonitorTab() {
    return monitorTab;
  }

  /**
   * Allow or prevent the user from directly editing the field text. If false is
   * passed, the user will only be able to select from the items defined in the
   * dropdown list.
   * 
   * @param editable true to allow the user to directly edit the field text
   */
  public void setEditable(boolean editable) {
    this.editable = editable;
    if (rendered) {
      El fromEl = getInputEl();
      if (!readOnly) {
        fromEl.dom.setPropertyBoolean("readOnly", !editable);
      }
      fromEl.setStyleName("x-triggerfield-noedit", !editable);
      if (GXT.isAriaEnabled()) {
        fromEl.dom.setAttribute("aria-readonly", editable ? "false" : "true");
      }
    }
  }

  /**
   * True to hide the trigger (defaults to false, pre-render).
   * 
   * @param hideTrigger true to hide the trigger
   */
  public void setHideTrigger(boolean hideTrigger) {
    this.hideTrigger = hideTrigger;
  }

  /**
   * True to monitor tab key events to force the bluring of the field (defaults
   * to true).
   * 
   * @param monitorTab true to monitor tab key events
   */
  public void setMonitorTab(boolean monitorTab) {
    this.monitorTab = monitorTab;
  }

  /**
   * Sets the trigger style name.
   * 
   * @param triggerStyle
   */
  public void setTriggerStyle(String triggerStyle) {
    this.triggerStyle = triggerStyle;
  }

  @Override
  public void setReadOnly(boolean readOnly) {
    this.readOnly = readOnly;
    if (rendered) {
      el().setStyleName(readOnlyFieldStyle, readOnly);
      if (editable || (readOnly && !editable)) {
        getInputEl().dom.setPropertyBoolean("readOnly", readOnly);
      }
    }
  }

  @Override
  protected Size adjustInputSize() {
    return new Size(hideTrigger ? 0 : trigger.getStyleSize().width, 0);
  }

  @Override
  protected void afterRender() {
    super.afterRender();
    addStyleOnOver(trigger.dom, "x-form-trigger-over");
    removeStyleName(fieldStyle);
  }

  protected void beforeBlur() {
  }

  protected void mimicBlur(PreviewEvent e, Element target) {
    if (!el().dom.isOrHasChild(target) && validateBlur(e, target)) {
      triggerBlur(null);
    }
  }

  @Override
  protected void onKeyDown(FieldEvent fe) {
    super.onKeyDown(fe);
    if (monitorTab && fe.getKeyCode() == KeyCodes.KEY_TAB) {
      triggerBlur(fe);
    }
  }

  @Override
  protected void onBlur(ComponentEvent ce) {
  }

  @Override
  protected void onClick(ComponentEvent ce) {
    if (!readOnly
        && ((!editable && getInputEl().dom.isOrHasChild(ce.getTarget())) || (trigger.dom.isOrHasChild(ce.getTarget())))) {
      onTriggerClick(ce);
    }
    super.onClick(ce);
  }

  @Override
  protected void onDisable() {
    super.onDisable();
    addStyleName("x-item-disabled");
  }

  @Override
  protected void onEnable() {
    super.onEnable();
    removeStyleName("x-item-disabled");
  }

  @Override
  protected void onFocus(ComponentEvent ce) {
    super.onFocus(ce);
    if (!mimicing) {
      addStyleName("x-trigger-wrap-focus");
      mimicing = true;
      focusEventPreview.add();
    }
  }

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

    focusEventPreview = new BaseEventPreview() {
      protected boolean onAutoHide(final PreviewEvent ce) {
        if (ce.getEventTypeInt() == Event.ONMOUSEDOWN) {
          mimicBlur(ce, ce.getTarget());
        }
        return false;
      }
    };

    if (el() != null) {
      super.onRender(target, index);
      return;
    }

    setElement(DOM.createDiv(), target, index);

    if (!isPassword()) {
      input = new El(DOM.createInputText());
    } else {
      input = new El(DOM.createInputPassword());
    }

    addStyleName("x-form-field-wrap");

    input.addStyleName(fieldStyle);

    trigger = new El(GXT.isHighContrastMode ? DOM.createDiv() : DOM.createImg());
    trigger.dom.setClassName("x-form-trigger " + triggerStyle);
    trigger.dom.setPropertyString("src", GXT.BLANK_IMAGE_URL);
    if (GXT.isAriaEnabled()) {
      trigger.dom.setPropertyString("alt", "Dropdown");
    }

    el().appendChild(input.dom);
    el().appendChild(trigger.dom);

    if (hideTrigger) {
      trigger.setVisible(false);
    }

    super.onRender(target, index);

    if (!editable) {
      setEditable(false);
    }
  }

  @Override
  protected void onResize(int width, int height) {
    super.onResize(width, height);
    if ((GXT.isIE6 || GXT.isIE7) && !hideTrigger) {
      int y;
      if ((y = input.getY()) != trigger.getY()) {
        trigger.setY(y);
      }
    }
  }

  protected void onTriggerClick(ComponentEvent ce) {
    fireEvent(Events.TriggerClick, ce);
  }

  protected void triggerBlur(ComponentEvent ce) {
    DeferredCommand.addCommand(new Command() {
      public void execute() {
        getFocusEl().blur();
      }
    });
    mimicing = false;
    focusEventPreview.remove();
    beforeBlur();
    removeStyleName("x-trigger-wrap-focus");
    super.onBlur(ce);
  }

  protected boolean validateBlur(DomEvent ce, Element target) {
    return true;
  }

}