Extjs GWT组合框多选

我尝试使我的组合框成为多个选择 这是我的代码：

此多选组合框：

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

}

import java.util.List；
导入com.extjs.gxt.ui.client.data.ModelData；
导入com.extjs.gxt.ui.client.event.ComponentEvent；
导入com.extjs.gxt.ui.client.event.WindowEvent；
导入com.extjs.gxt.ui.client.event.WindowListener；
导入com.extjs.gxt.ui.client.store.ListStore；
导入com.extjs.gxt.ui.client.widget.CheckBoxListView；
导入com.extjs.gxt.ui.client.widget.Dialog；
导入com.extjs.gxt.ui.client.widget.form.TriggerField；
导入com.extjs.gxt.ui.client.widget.layout.FillLayout；
导入com.google.gwt.user.client.Element；
公共类MultiSelectComboBox扩展了TriggerField{
私有对话框checkBoxListHolder；
私有CheckBoxListView listView；
私人列表商店；
专用字符串分隔符=“，”；
私有布尔只读；
公共多选组合框（）{
store=newliststore（）；
listView=新的CheckBoxListView（）；
}
@凌驾
受保护的无效OnTiggerClick（组件事件ce）{
super.OnTiggerClick（ce）；
checkBoxListHolder.setSize（getWidth（），200）；
setWidth（getWidth（））；
checkBoxListHolder.setPosition（getAbsoluteLeft（），
getAbsoluteTop（）+getHeight（））；
if（checkBoxListHolder.isVisible（））{
checkBoxListHolder.hide（）；
}
否则{
checkBoxListHolder.show（）；
}
}
@凌驾
受保护的void onRender（元素目标，int索引）{
super.onRender（目标，索引）；
checkBoxListHolder=新建对话框（）；
checkBoxListHolder.setClosable（false）；
checkBoxListHolder.SetHeadService（假）；
checkBoxListHolder.setFooter（false）；
checkBoxListHolder.setFrame（假）；
checkBoxListHolder.SetResizeable（假）；
checkBoxListHolder.setAutoHide（false）；
checkBoxListHolder.getButtonBar（）.setVisible（false）；
setLayout（新的FillLayout（））；
checkBoxListHolder.add（listView）；
listView.setStore（存储）；
checkBoxListHolder.addWindowListener（新的WindowListener（）{
@凌驾
public void windowHide（WindowEvent we）{
setValue（parseCheckedValues（listView））；
}
});
}
私有字符串parseCheckedValues（CheckBoxListView checkBoxView）{
StringBuffer buf=新的StringBuffer（）；
if（checkBoxView！=null）{
所选列表=checkBoxView.getChecked（）；
int index=1，len=selected.size（）；
对于（D c：已选择）{
append（c.get（listView.getDisplayProperty（））；
如果（索引

然后在我的项目中使用此类：

    // ...
    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;
}

/。。。
ListStore employeeList=getUsers（）；
MultiSelectComboBox multiUsers=新的MultiSelectComboBox（）；
multiUsers.getListView（）.setDisplayProperty（“标签”）；
//多用户.setStore（employeeList）；
multiUsers.getStore（）.add（getModelData（））；
多用户。setFieldLabel（“员工”）；
//multiUsers.setEditable（true）；
//多用户。设置最大高度（200）；
添加（多用户，formData）；
// ...
私有列表getModelData（）{
列表=新的ArrayList（）；
List employeeList.getModels（）；
对于（int i=0；i这听起来像是在寻找类似选项的东西，如果是这样的话，你可以在源代码中查找指针——或者不必重新发明轮子，只需使用GwtBootstrap3组件
似乎你的问题与Sencha ExtJS/GXT更相关。我添加了一些标记（待审查）因此，订阅它们的人可以清楚地看到您的问题。