ComboBox with Multi Selection

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

Licence: GNU GPL license v3

Code

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

}

---

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

I dont know.. needed test :)

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;

Quote:

---

Originally Posted by fother

I'm happy to announce more one plugin for GXT :D
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.

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

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

Regards, Iván.

yes, I loose the password :))

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

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.

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.