GXT 4 custom combobox with color choices in a gallery format.

ComboColorChooserExample.java

import java.util.Arrays;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.google.gwt.dom.client.DivElement;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Style.Display;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.dom.client.Style.VerticalAlign;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
import com.google.gwt.text.shared.AbstractSafeHtmlRenderer;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.cell.core.client.SimpleSafeHtmlCell;
import com.sencha.gxt.cell.core.client.form.ComboBoxCell;
import com.sencha.gxt.cell.core.client.form.ComboBoxCell.TriggerAction;
import com.sencha.gxt.cell.core.client.form.TriggerFieldCell.TriggerFieldAppearance;
import com.sencha.gxt.core.client.IdentityValueProvider;
import com.sencha.gxt.core.client.dom.XElement;
import com.sencha.gxt.core.client.resources.CommonStyles;
import com.sencha.gxt.data.shared.LabelProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.test.client.combo_gallery_colorchooser.ComboColorChooserExample.AppResources.Styles;
import com.sencha.gxt.theme.base.client.listview.ListViewCustomAppearance;
import com.sencha.gxt.widget.core.client.ListView;
import com.sencha.gxt.widget.core.client.form.ComboBox;

public class ComboColorChooserExample implements EntryPoint {

  public interface AppResources extends ClientBundle {
    public static AppResources INSTANCE = GWT.create(AppResources.class);

    public interface Styles extends CssResource {
      String over();

      String select();

      String thumb();

      String thumbWrap();
    }

    @Source({ "styles.gss" })
    Styles styles();
  }

  private Styles style;
  private ListStore<ColorChoice> store;
  private ComboBox<ColorChoice> combo;

  @Override
  public void onModuleLoad() {
    final AppResources resources = GWT.create(AppResources.class);
    resources.styles().ensureInjected();
    style = resources.styles();

    ColorChoice[] colors = new ColorChoice[10];
    for (int i = 0; i < colors.length; i++) {
      colors[i] = new ColorChoice(getRandomColor());
    }

    store = new ListStore<ColorChoice>(new ModelKeyProvider<ColorChoice>() {
      @Override
      public String getKey(ColorChoice item) {
        return item.getColor();
      }
    });
    store.addAll(Arrays.asList(colors));

    LabelProvider<ColorChoice> labelProvider = new LabelProvider<ColorChoice>() {
      @Override
      public String getLabel(ColorChoice item) {
        if (item.getColor() == null) {
          return "None";
        }
        // no label need, using a color
        String html = item.getColor();
        return html;
      }
    };

    TriggerFieldAppearance appearance = GWT.<TriggerFieldAppearance>create(TriggerFieldAppearance.class);

    ListView<ColorChoice, ColorChoice> listView = createListView();

    ComboBoxCell<ColorChoice> cell = new ComboBoxCell<ColorChoice>(store, labelProvider, listView, appearance) {
      private DivElement div;

      @Override
      public void setText(final XElement parent, final String text) {
        // super.setText(parent, text);

        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
          @Override
          public void execute() {
            renderLater(parent, text);
          }
        });
      }
      
      @Override
      protected void onSelect(ColorChoice item) {
        super.onSelect(item);
        
        // pass in field reference.
        renderLater(combo.getElement(), item.getColor());
      }

      // render later so I can get sizes
      private void renderLater(XElement parent, String text) {
        GWT.log("setText v=" + text);

        if (div == null) {
          Element inputEl = getInputElement(parent);
          int height = inputEl.getOffsetHeight();

          // Add in div for adding the color chosen to it
          div = Document.get().createDivElement();
          // TODO height may be off a couple pixels
          div.getStyle().setHeight(height, Unit.PX);
          div.getStyle().setDisplay(Display.INLINE_BLOCK);
          div.getStyle().setVerticalAlign(VerticalAlign.MIDDLE);
          inputEl.getParentElement().insertFirst(div);
        }

        div.setInnerHTML(getColorTemplate(text));
      }
    };

    combo = new ComboBox<ColorChoice>(cell);
    combo.setTriggerAction(TriggerAction.ALL);
    combo.setValidateOnBlur(false);
    combo.setClearValueOnParseError(false);

    

    RootPanel.get().add(new HTML("<br><br><br>"));
    RootPanel.get().add(combo);
  }

  public ListView<ColorChoice, ColorChoice> createListView() {
    ListViewCustomAppearance<ColorChoice> appearance = new ListViewCustomAppearance<ColorChoice>(
        "." + style.thumbWrap(), style.over(), style.select()) {
      @Override
      public void renderEnd(SafeHtmlBuilder builder) {
        String markup = new StringBuilder("<div class=\"").append(CommonStyles.get().clear()).append("\"></div>")
            .toString();
        builder.appendHtmlConstant(markup);
      }

      @Override
      public void renderItem(SafeHtmlBuilder builder, SafeHtml content) {
        builder.appendHtmlConstant("<div class='" + style.thumbWrap() + "' style='border: 1px solid white'>");
        builder.append(content);
        builder.appendHtmlConstant("</div>");
      }
    };

    ListView<ColorChoice, ColorChoice> listView = new ListView<ColorChoice, ColorChoice>(store,
        new IdentityValueProvider<ColorChoice>() {
          @Override
          public void setValue(ColorChoice object, ColorChoice value) {
          }
        }, appearance);
    listView.setCell(new SimpleSafeHtmlCell<ColorChoice>(new AbstractSafeHtmlRenderer<ColorChoice>() {
      @Override
      public SafeHtml render(ColorChoice object) {
        String color = object.getColor();
        String html = getColorTemplate(color);
        return SafeHtmlUtils.fromSafeConstant(html);
      }
    }));
    listView.setBorders(false);

    return listView;
  }

  public String getColorTemplate(String color) {
    String template = "<span style='display: inline-block; width:20px; height:20px; vertical-align: middle; background-color: "
        + color + "; border: 1px solid gray; margin: 3px;'>&nbsp;</span>";
    return template;
  }

  public String getRandomColor() {
    String letters = "0123456789ABCDEF";
    String color = "#";
    for (int i = 0; i < 6; i++) {
      int n = (int) Math.floor(Math.random() * 16);
      color += letters.charAt(n);
    }
    return color;
  }

  public class ColorChoice {
    private String color;

    public ColorChoice(String color) {
      this.color = color;
    }

    public String getColor() {
      return color;
    }

    public void setColor(String color) {
      this.color = color;
    }
  }

}

style.gss

.thumb {
  background: none repeat scroll 0 0 #ddd;
  padding: 3px;
}

.thumb img {
  height: 100px;
  width: 100px;
  object-fit: contain;
}

.thumbWrap {
  border: 1px solid white;
  float: left;
  margin: 4px 0 4px 4px;
  padding: 5px;
  font: 11px Arial, Helvetica, sans-serif;
}

.thumbWrap span {
  display: block;
  overflow: hidden;
  text-align: center;
}

.over {
  background: repeat-x scroll left top #efefef;
  border: 1px solid #ddd !important;
  padding: 5px;
}

.select {
  background: none repeat scroll 0 50% #dfe8f6;
  border: 1px dotted #a3bae9 !important;
  cursor: pointer;
}

.select .thumb {
  background: none repeat scroll 0 0 transparent;
}