GWT comboBox multiSelect

Question

I try to make my comboBox multiple selection and this my code:

this multiSelectComboBox:

import java.util.List;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.event.WindowListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.CheckBoxListView;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.form.TriggerField;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.google.gwt.user.client.Element;


public class MultiSelectComboBox<D extends ModelData> extends TriggerField<String> {

    private Dialog checkBoxListHolder;
    private CheckBoxListView<D> listView;
    private ListStore<D> store;
    private String delimiter = ",";
    private boolean readOnly;

    public MultiSelectComboBox() {
        store = new ListStore<D>();
        listView = new CheckBoxListView<D>();
    }

    @Override
    protected void onTriggerClick(ComponentEvent ce) {
        super.onTriggerClick(ce);
        checkBoxListHolder.setSize(getWidth(), 200);
        listView.setWidth(getWidth());
        checkBoxListHolder.setPosition(getAbsoluteLeft(),
                getAbsoluteTop() + getHeight());
        if(checkBoxListHolder.isVisible()) {
            checkBoxListHolder.hide();
        }
        else {
            checkBoxListHolder.show();
        }
    }

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

        checkBoxListHolder = new Dialog();
        checkBoxListHolder.setClosable(false);
        checkBoxListHolder.setHeaderVisible(false);
        checkBoxListHolder.setFooter(false);
        checkBoxListHolder.setFrame(false);
        checkBoxListHolder.setResizable(false);
        checkBoxListHolder.setAutoHide(false);
        checkBoxListHolder.getButtonBar().setVisible(false);
        checkBoxListHolder.setLayout(new FillLayout());
        checkBoxListHolder.add(listView);
        listView.setStore(store);

        checkBoxListHolder.addWindowListener(new WindowListener(){

            @Override
            public void windowHide(WindowEvent we) {
                setValue(parseCheckedValues(listView));
            }
        });

    }

    private String parseCheckedValues(CheckBoxListView<D> checkBoxView) {
        StringBuffer buf = new StringBuffer();
        if(checkBoxView != null) {
            List<D> selected = checkBoxView.getChecked();
            int index = 1, len = selected.size();
            for(D c : selected) {
                buf.append(c.get(listView.getDisplayProperty()));
                if(index < len) {
                    buf.append(delimiter);
                }
                index++;
            }
        }
        return buf.toString();
    }

    public CheckBoxListView<D> getListView() {
        return listView;
    }

    public void setListView(CheckBoxListView<D> listView) {
        this.listView = listView;
    }

    public ListStore<D> getStore() {
        return store;
    }

    public void setStore(ListStore<D> store) {
        this.store = store;
    }

    public String getDelimiter() {
        return delimiter;
    }

    public void setDelimiter(String delimiter) {
        this.delimiter = delimiter;
    }

    public boolean isReadOnly() {
        return readOnly;
    }

    public void setReadOnly(boolean readOnly) {
        this.readOnly = readOnly;
    }

}

then use this class in my project:

    // ...
    ListStore<UserDTO> employeeList = getUsers();

    MultiSelectComboBox<ModelData> multiUsers = new MultiSelectComboBox<ModelData>();
    multiUsers.getListView().setDisplayProperty("label");
    //multiUsers.setStore(employeeList);  
    multiUsers.getStore().add(getModelData());
    multiUsers.setFieldLabel("Employee");
    //multiUsers.setEditable(true);
    //multiUsers.setMaxHeight(200);
    simpleForm.add(multiUsers, formData);
    // ...


private List<ModelData> getModelData() {
    List<ModelData> list = new ArrayList<ModelData>();
    List<NctrUserDTO> employees= employeeList.getModels();

    for (int i=0; i<employeeList.getCount(); i++) {
        ModelData data = new BaseModel();
        data.set("label", employeeList.getAt(i).getName());
        list.add(data);
    }

    return list;
}

but the comboBox appear empty or have not any values when i pass values from employeeList but when i tried with static string values this works fine, i dont know why this problem occur, any suggestion please ??

Answer 1

It sounds as if your looking for something like the option multiple select boxes, if so you can look up the source code on Github for pointers - or rather than re-inventing the wheel, just use that GwtBootstrap3 component