ComboBox with Multi Selection

[VadimV1144]

Slight modification to the XComboBox with CheckBox multi-select.
When setting the data pre-render, the choices selected where not reflected in the text that is displayed when the combo is collapsed.
Added a code that updates that string to the onRender() method.

Only modified and new methods (onRender(), updateTextValue() and collapse()):

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent,index);
        // Need to update the text value in order to
        // display the proper values when the data was set pre-render
        updateTextValue();
    }

    @Override
    public void collapse() {
        super.collapse();
        updateTextValue();
        updateHiddenValue();
    }

    /**
     * Update the text value displayed when the ComboBox is collapsed.
     */
    private void updateTextValue(){
        String text = "";
        for (D d : getSelection()) {
            if (text.length() > 0) {
                text += rawSeparator;
            }
            text += d.get(getDisplayField());
        }
        setRawValue(text.isEmpty()?this.getEmptyText():text);        
    }

Full code:

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
    protected void onRender(Element parent, int index) {
        super.onRender(parent,index);
        // Need to update the text value in order to
        // display the proper values when the data was set pre-render
        updateTextValue();
    }

    @Override
    public void expand(){
        super.expand();
    }

    @Override
    public void collapse() {
        super.collapse();
        updateTextValue();
        updateHiddenValue();
    }

    /**
     * Update the text value displayed when the ComboBox is collapsed.
     */
    private void updateTextValue(){
        String text = "";
        for (D d : getSelection()) {
            if (text.length() > 0) {
                text += rawSeparator;
            }
            text += d.get(getDisplayField());
        }
        setRawValue(text.isEmpty()?this.getEmptyText():text);        
    }

    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);
        }

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

    @Override
    protected void doForce() {
        return;
    }    

    public String getRawSeparator() {
        return rawSeparator;
    }

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

    @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);
        }

        bindStore(store, true);

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


    private native BaseEventPreview getEventPreview() /*-{
        return this.@com.extjs.gxt.ui.client.widget.form.ComboBox::eventPreview;
    }-*/;

    private native El getFooter() /*-{
        return this.@com.extjs.gxt.ui.client.widget.form.ComboBox::footer;
    }-*/;

    private native InputElement getHiddenInput() /*-{
        return this.@com.extjs.gxt.ui.client.widget.form.ComboBox::hiddenInput;
    }-*/;

    private native StoreListener<D> getStoreListener() /*-{
       return this.@com.extjs.gxt.ui.client.widget.form.ComboBox::storeListener;
    }-*/;

    private native void setFooter(El footer) /*-{
    this.@com.extjs.gxt.ui.client.widget.form.ComboBox::footer = footer;

    }-*/;

    private native void setInitialized(boolean initialized) /*-{
         this.@com.extjs.gxt.ui.client.widget.form.ComboBox::initialized = initialized;
    }-*/;

    private native void setList(LayoutContainer list)/*-{
         this.@com.extjs.gxt.ui.client.widget.form.ComboBox::list = list;
    }-*/;

    private native void setMode(String mode)/*-{
         this.@com.extjs.gxt.ui.client.widget.form.ComboBox::mode = mode;
    }-*/;

    private native void setPagingToolBar(PagingToolBar pageTb)/*-{
         this.@com.extjs.gxt.ui.client.widget.form.ComboBox::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 clearSelections() {

        List<D> selection = this.getSelection();

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

        super.clear();
        super.clearSelections();
    }

    @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);
        }
    }

}

[chenli868]

Hi, thanks for provide this widget. However, I find that it is not able to use the setSelection to check the item I want to check at initialization. Also, if I add a selectionChangedListener to the widget, it does not fire event if I check or uncheck items. Can anybody identify possible causes? I am using GXT 2.1.1.

[stiptkevin]

The setSelection is indeed not working correctly

[stiptkevin]

It seems that clearSelection() is also not working.

[micgala]

It seems the author is not working on that anymore.
If you need this feature and fix it, it would be very nice from you to post the fixed version here.

[diegolovison]

I update the source code

package abc.client.widget.form;

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.GXT;
import com.extjs.gxt.ui.client.core.XDOM;
import com.extjs.gxt.ui.client.core.XTemplate;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
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.store.StoreEvent;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.google.gwt.event.dom.client.KeyCodes;

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

	private final String separator = ",";
	private final List<D> checkedValues = new ArrayList<D>();
	private final String propertyComparator;
	private final String checkBoxId = "checkbox-" + XDOM.getUniqueId();

	public XMultiComboBox(final String propertyComparator) {
		this.propertyComparator = propertyComparator;
		setUseQueryCache(false);
		setForceSelection(false);
		setTypeAhead(false);
	}

	@Override
	public void clear() {
		final CheckBoxListView<D> view = (CheckBoxListView<D>) getView();
		final List<D> list = view.getChecked();
		for (final D d : list) {
			view.setChecked(d, false);
		}
		checkedValues.clear();
		setRawValue(null);
		super.clear();
	}

	@Override
	protected PagingLoadConfig getParams(String query) {

		if (query != null && !query.isEmpty()) {

			if (query.endsWith(",")) {
				query = "";
			} else {

				final String array[] = query.split(separator);
				final int length = array.length;
				if (length > 0) {
					query = array[length - 1].trim();
				}
			}
		}

		return super.getParams(query);
	}

	@Override
	public List<D> getSelection() {
		return checkedValues;
	}

	@Override
	public D getValue() {
		return checkedValues.size() > 0 ? checkedValues.get(0) : null;
	}

	@Override
	protected void initList() {

		// template
		final String spacing = GXT.isIE && !GXT.isStrict ? "0" : "3";
		setTemplate(XTemplate.create("<tpl for=\".\"><div class=\"x-view-item x-view-item-check\"><table cellspacing='"
		    + spacing + "' cellpadding=0><tr><td><input id=\"" + checkBoxId
		    + "\" class=\"x-view-item-checkbox\" type=\"checkbox\" /></td><td><td>{" + getDisplayField()
		    + "}</td></tr></table></div></tpl>"));

		// view
		final CheckBoxListView<D> listView = new CheckBoxListView<D>();
		setView(listView);

		super.initList();

		listView.setSelectOnOver(false);
		listView.setItemSelector(getItemSelector() != null ? getItemSelector() : ".x-view-item");
		listView.setSelectStyle("");
	}

	@Override
	protected void onBlur(final ComponentEvent ce) {

		super.onBlur(ce);

		final String[] array = getRawValue().split(separator);
		final List<D> listToRemove = new ArrayList<D>();

		for (final D d : checkedValues) {

			boolean contain = false;

			for (final String str : array) {
				if (d.get(getDisplayField()).equals(str.trim())) {
					contain = true;
					break;
				}
			}

			if (!contain) {
				listToRemove.add(d);
			}
		}

		checkedValues.removeAll(listToRemove);

		updateText();

	}

	@Override
	protected void onKeyUp(final FieldEvent fe) {

		super.onKeyUp(fe);

		final int keyCode = fe.getKeyCode();
		if (keyCode == KeyCodes.KEY_DELETE || keyCode == KeyCodes.KEY_BACKSPACE) {
			clear();
		} else {

			final String rv = getRawValue();
			if (rv == null || rv.trim().isEmpty()) {
				clear();
			}
		}
	}

	@Override
	protected void onLoad(final StoreEvent<D> se) {

		super.onLoad(se);

		final List<D> list = store.getModels();
		if (list != null && !list.isEmpty()) {

			for (final D item : list) {
				for (final D selected : checkedValues) {
					if (item.get(propertyComparator).equals(selected.get(propertyComparator))) {
						((CheckBoxListView<D>) getView()).setChecked(item, true);
					}
				}
			}
		}
	}

	@Override
	protected void onSelect(final D model, final int index) {
		final FieldEvent fe = new FieldEvent(this);
		if (fireEvent(Events.BeforeSelect, fe)) {

			boolean contain = false;
			for (final D selected : checkedValues) {
				if (model.get(propertyComparator).equals(selected.get(propertyComparator))) {
					contain = true;
					checkedValues.remove(selected);
					break;
				}
			}

			if (!contain) {
				checkedValues.add(model);
			}

			setValue(model);

			updateText();

			fireEvent(Events.Select, fe);
		}
	}

	@Override
	protected void onViewClick(final DomEvent de, final boolean focus) {

		final String id = de.getTarget().getId();
		if (id != null && id.startsWith(checkBoxId)) {
			super.onViewClick(de, focus);
		}
	}

	@Override
	protected boolean selectByValue(final String value) {
		return true;
	}

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

		clear();

		if (selection != null) {
			for (final D d : selection) {
				checkedValues.add(d);
			}
		}

		updateText();
	}

	@Override
	public void setValue(final D value) {
		// não faz nada ;)
	}

	private void updateText() {

		final StringBuilder sb = new StringBuilder();

		for (final D d : checkedValues) {
			if (sb.length() > 0) {
				sb.append(separator + " ");
			}

			sb.append(d.get(getDisplayField()));
		}

		setRawValue(sb.toString());
	}

}

[raj_s37]

please provide some examples / how to integrate the ComboBox with Multi Selection with in the editor grid

[prithvig]

hey, the XMultiComboBox extends MultiComboBox. which MultiComboBox are you extending? the one posted in the link or the original one or the one that is just before this? i tried using all three but neither of them work. in the one posted above this the only problem is in setting the values pre-rendering... has anyone found a good solution for this?