GWT comboBox multiSelect

时间:2017-01-05 13:14:48

标签: extjs gwt combobox gxt

我尝试让我的comboBox多次选择 这是我的代码:

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

}

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

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

但是当我从employeeList传递值时,comboBox显示为空或没有任何值,但是当我尝试使用静态字符串值时,这工作正常,我不知道为什么会出现这个问题,有什么建议吗?

1 个答案:

答案 0 :(得分:1)

听起来好像你正在寻找类似multiple select boxes选项的东西,如果是这样你可以在Github上查找源代码以获取指针 - 或者不是重新发明轮子,只需使用它GwtBootstrap3组件

相关问题