PDA

View Full Version : ComboBox with Multi Selection



fother
8 Jul 2009, 11:02 AM
I'm happy to announce more one plugin for GXT :D
look the attachment

Licence: GNU GPL license v3 (http://www.gnu.org/copyleft/gpl.html)

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

}

Arno.Nyhm
19 Aug 2009, 12:00 AM
i see at the attached images it is also possible with paging. but: are the selected items also remembered after page changing?

fother
20 Aug 2009, 6:44 AM
I dont know.. needed test :)

Ammiddeon
20 Aug 2009, 3:55 PM
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;

lmivan
22 Nov 2009, 7:16 AM
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.

diegolovison
23 Nov 2009, 3:22 AM
I dont use more this component.. so I wont implement

lmivan
23 Nov 2009, 5:26 AM
And what about you, fother (the creator of the code)?.

Regards, Iván.

diegolovison
23 Nov 2009, 7:30 AM
yes, I loose the password :))

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

lmivan
23 Nov 2009, 8:19 AM
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.

maqjav
6 Apr 2010, 4:37 AM
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.

sdhery
16 Apr 2010, 7:09 AM
hello,Can treePanel in listView?

micgala
30 Jun 2010, 4:53 AM
Updated code:
http://www.sencha.com/forum/showthread.php?102903-How-to-create-Combox-with-CheckBox-items&p=482721#post482721

jarichonas
6 Jul 2010, 11:51 PM
thanks micgala for this..

-------------------------
buy uk (http://www.buyviagraonlineuk.net/)
soft (http://www.viagrasoft.co.uk/)

subhransu2417
2 Sep 2010, 10:52 PM
Hey after adding the above code i am getting some errors like
can't able to resolve the fields assetHeight, eventPreview, footer, hiddenInput
Can anyone please guide me on this?

micgala
2 Sep 2010, 11:24 PM
There is an updated code, I sent the link 3 messages before this.
Also, if you are using 2.2, it could be that some changes are needed, since that code is prior 2.2.

Regards,
Michel.

subhransu2417
2 Sep 2010, 11:33 PM
hey thanks for your reply...i have fixed that issue..
But according to my project requirement i dont need the checkboxes. i need something like given in extjs
Take a look on the following link:
http://www.sencha.com/forum/showthread.php?33794-Ext.ux.BoxSelect-(like-the-Facebook-s-one)
So can you guide me..how can i do it...

subhransu2417
2 Sep 2010, 11:56 PM
hey thanks for your reply i have fixed that issue.
But according to my project requirement i need something like this:
http://www.sencha.com/forum/showthread.php?33794-Ext.ux.BoxSelect-(like-the-Facebook-s-one)
in GXT.

micgala
6 Sep 2010, 12:18 AM
Hi.

That doesn't exist out of the box.
You would need to implement it. You could take the extjs one, and rewrite it to gxt.

Regards,
Michel.

subhransu2417
6 Sep 2010, 9:33 PM
Hey,
thanks for your reply. I have to check the EXT js code inside it. For now can you help me on how to retain the value in GXT combobox. Because whenever i put a comma(,) after one value. its deleting the first value. So how can i able to have all the values with comma in it in combobox?

jawahar_prasad
4 Oct 2010, 3:03 AM
Appreciate your efforts fother!! Nice Plugin!

& micgala (http://www.sencha.com/forum/member.php?54270-micgala) for taking time to post the link to the updated code! :)

VadimV1144
3 Nov 2010, 3:35 AM
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
28 Dec 2010, 6:12 PM
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
3 Mar 2011, 3:00 AM
The setSelection is indeed not working correctly

stiptkevin
16 Mar 2011, 7:48 AM
It seems that clearSelection() is also not working.

micgala
16 Mar 2011, 8:01 AM
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
16 Mar 2011, 9:04 AM
I update the source code
:D





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
30 Jan 2012, 6:06 AM
please provide some examples / how to integrate the ComboBox with Multi Selection with in the editor grid

prithvig
17 Apr 2012, 4:46 AM
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?