ComboBox with Multi Selection

[fother]

I'm happy to announce more one plugin for GXT
look the attachment

Licence: GNU GPL license v3

Code

package com.extjs.gxt.samples.explorer.client;

import java.util.List;

import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.core.El;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoader;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.StoreListener;
import com.extjs.gxt.ui.client.util.BaseEventPreview;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.ListView;
import com.extjs.gxt.ui.client.widget.form.ComboBox;
import com.extjs.gxt.ui.client.widget.form.ListModelPropertyEditor;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.google.gwt.dom.client.InputElement;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

public class XComboBox<D extends ModelData> extends ComboBox<D> {

	private String valueFieldSeparator = ";";
	private String rawSeparator = ", ";

	public XComboBox() {
		messages = new ComboBoxMessages();
		setView(new CheckBoxListView<D>());
		setPropertyEditor(new ListModelPropertyEditor<D>());
		monitorWindowResize = true;
		windowResizeDelay = 0;
		initComponent();
		setTriggerAction(TriggerAction.ALL);
	}

	private void bindStore(ListStore<D> store, boolean initial) {
		if (this.store != null && !initial) {
			this.store.removeStoreListener(getStoreListener());
			if (store == null) {
				this.store = null;
				if (getView() != null) {
					getView().setStore(null);
				}
			}
		}
		if (store != null) {
			this.store = store;
			if (store.getLoader() == null) {
				setMode("local");
			}
			if (getView() != null) {
				getView().setStore(store);
			}
			store.addStoreListener(getStoreListener());
		}
	}

	@Override
	public void collapse() {
		super.collapse();

		String text = "";

		for (D d : getSelection()) {

			if (text.length() > 0) {
				text += rawSeparator;
			}

			text += d.get(getDisplayField());
		}

		setRawValue(text);
		updateHiddenValue();
	}

	private void createList(boolean remove, LayoutContainer list) {
		RootPanel.get().add(list);

		setInitialized(true);

		if (getPagingToolBar() != null) {
			setFooter(list.el().createChild("<div class='" + getListStyle() + "-ft'></div>"));
			getPagingToolBar().setBorders(false);
			getPagingToolBar().render(getFooter().dom);
			setAssetHeight(getAssetHeight() + getFooter().getHeight());
		}

		if (remove) {
			RootPanel.get().remove(list);
		}
	}

	@Override
	protected void doForce() {
		return;
	}

	private native int getAssetHeight() /*-{
		return this.@com.extjs.gxt.samples.explorer.client.XComboBox::assetHeight;
	}-*/;

	private native BaseEventPreview getEventPreview() /*-{
		return this.@com.extjs.gxt.samples.explorer.client.XComboBox::eventPreview;
	}-*/;

	private native El getFooter() /*-{
		return this.@com.extjs.gxt.samples.explorer.client.XComboBox::footer;
	}-*/;

	private native InputElement getHiddenInput() /*-{
		return this.@com.extjs.gxt.samples.explorer.client.XComboBox::hiddenInput;
	}-*/;

	public String getRawSeparator() {
		return rawSeparator;
	}

	@Override
	public List<D> getSelection() {
		return ((CheckBoxListView<D>) getView()).getChecked();
	}

	private native StoreListener<D> getStoreListener() /*-{
		return this.@com.extjs.gxt.samples.explorer.client.XComboBox::storeListener;
	}-*/;

	@Override
	public D getValue() {
		return null;
	}

	public String getValueFieldSeparator() {
		return valueFieldSeparator;
	}

	@SuppressWarnings("unchecked")
	@Override
	protected void initList() {

		ListView<D> listView = getView();

		if (listView == null) {
			setView(new CheckBoxListView<D>());
		}

		String style = getListStyle();
		listView.setStyleAttribute("overflowX", "hidden");
		listView.setStyleName(style + "-inner");
		listView.setStyleAttribute("padding", "0px");
		listView.setSelectOnOver(true);
		listView.setBorders(false);
		listView.setStyleAttribute("backgroundColor", "white");
		listView.setSelectStyle(getSelectedStyle());
		listView.setLoadingText(getLoadingText());

		if (getTemplate() == null) {
			listView.setDisplayProperty(getDisplayField());
		} else {
			listView.setTemplate(getTemplate());
		}

		setAssetHeight(0);

		LayoutContainer list = new LayoutContainer() {
			@Override
			protected void onRender(Element parent, int index) {
				super.onRender(parent, index);
				getEventPreview().getIgnoreList().add(getElement());
			}
		};
		list.setScrollMode(Scroll.NONE);
		list.setShim(true);
		list.setShadow(true);
		list.setBorders(true);
		list.setStyleName(style);
		list.hide();

		assert store != null : "ComboBox needs a store";

		list.add(listView);

		setList(list);

		if (getPageSize() > 0) {
			PagingToolBar pageTb = new PagingToolBar(getPageSize());
			pageTb.bind((PagingLoader) store.getLoader());
			setPagingToolBar(pageTb);
		}

		if (!isLazyRender()) {
			createList(true, list);
		}

		bindStore(store, true);
	};

	private native void setAssetHeight(int assetHeight) /*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::assetHeight = assetHeight;
	}-*/;

	private native void setFooter(El footer) /*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::footer = footer;
	}-*/;

	private native void setInitialized(boolean initialized) /*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::initialized = initialized;
	}-*/;

	private native void setList(LayoutContainer list)/*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::list = list;
	}-*/;

	private native void setMode(String mode)/*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::mode = mode;
	}-*/;

	private native void setPagingToolBar(PagingToolBar pageTb)/*-{
		this.@com.extjs.gxt.samples.explorer.client.XComboBox::pageTb = pageTb;
	}-*/;

	public void setRawSeparator(String rawSeparator) {
		this.rawSeparator = rawSeparator;
	}

	@Override
	public void setSelection(List<D> selection) {

		for (D d : selection) {
			((CheckBoxListView<D>) getView()).setChecked(d, true);
		}

		super.setSelection(selection);
	}

	@Override
	public void setValue(D value) {
		return;
	}

	public void setValueFieldSeparator(String valueFieldSeparator) {
		this.valueFieldSeparator = valueFieldSeparator;
	}

	private void updateHiddenValue() {
		if (getHiddenInput() != null) {

			String v = "";

			for (D d : getSelection()) {

				if (v.length() > 0) {
					v += valueFieldSeparator;
				}

				v += d.get(getValueField());
			}

			getHiddenInput().setValue(v);
		}
	}

}

[Arno.Nyhm]

i see at the attached images it is also possible with paging. but: are the selected items also remembered after page changing?

[fother]

I dont know.. needed test

[Ammiddeon]

Examplepublic void onModuleLoad FormPanel form = new FormPanel;TextFieldWithButton field = new TextFieldWithButtonnew Button"button";field.setFieldLabel"field";TextField t = new TextField;t.setFieldLabel"other field";form.addfield;form.addt;RootPanel.get.addform;TextFieldWithButtonpackage example.client;import com.extjs.gxt.ui.client.GXT;import com.extjs.gxt.ui.client.core.El;import com.extjs.gxt.ui.client.widget.ComponentHelper;import com.extjs.gxt.ui.client.widget.button.Button;import com.extjs.gxt.ui.client.widget.form.TextField;import com.google.gwt.user.client.DOM;import com.google.gwt.user.client.Element;public class TextFieldWithButton extends TextField private El wrap;private El input;private final Button button;private final int buttonOffset = 3;public TextFieldWithButtonButton button this.button = button;Overrideprotected void doAttachChildren super.doAttachChildren;ComponentHelper.doAttachbutton;Overrideprotected void doDetachChildren super.doDetachChildren;ComponentHelper.doDetachbutton;Overrideprotected El getInputEl return input;Overrideprotected void onAttach super.onAttach;wrap.removeStyleNamefieldStyle;if GXT.isIE int y1, y2;if y1 = input.getY = y2 = el.getParent.getY int dif = y2 - y1;input.setTopdif;Overrideprotected void onRenderElement target, int index wrap = new ElDOM.createDiv;wrap.addStyleName"x-form-field-wrap";wrap.addStyleName"x-form-file-wrap";input = new ElDOM.createInputText;input.addStyleNamefieldStyle;input.addStyleName"x-form-file-text";input.setStyleAttribute"color", "#000000";wrap.appendChildinput.dom;setElementwrap.dom, target, index;super.onRendertarget, index;button.addStyleName"x-form-file-btn";button.renderwrap.dom;if width == null setWidth150;Overrideprotected void onResizeint width, int height super.onResizewidth, height;input.setWidthwrap.getWidth - button.el.getWidth - buttonOffset;

[lmivan]

I'm happy to announce more one plugin for GXT
look the attachment

Your code is great, is what i've been looking for. I only have a suggestion. Could it be possible to select the tags like in gmail?. I mean, i write the first letters and then I press the "enter" key to select this tag. Then, I write the first letters of the second word and repeat the process.
Now it is only possible to select the values with the mouse.

What should I change to implement the previous behaviour?.

Thanks and regards, Iván.

[diegolovison]

I dont use more this component.. so I wont implement

[lmivan]

And what about you, fother (the creator of the code)?.

Regards, Iván.

[diegolovison]

yes, I loose the password

I dont have time to implement more components..
you can change itself..

[lmivan]

Ok, you're the same person :-P.

I have no problem to change the code but, could you please send me some tips or a pseudo-code of what should I do?. I mean, what methods should I change or rewrite or something to start with.

Thanks and regards, Iván.

[maqjav]

Hello.

This is a nice component but I found a small issue and I don't see how to fix it.
I have a grid where I can click on an row and then load some datas in the XComboBox.

I edited the function setSelection for change the text of the textfield once I click on a row and it works properly, but if I open the combo the checkboxes don't appear checked.
After click on a row for first time then it works perfect.

I know you don't use it anymore and probably you won't have time for this but if you can tell me where or how to fix it I will really appreciate it. I guess is something very easy.

Thank you.