Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: ComboBox with Multi Selection

  1. #1
    Ext User
    Join Date
    Sep 2007
    Location
    Brazil
    Posts
    744

    Default ComboBox with Multi Selection

    I'm happy to announce more one plugin for GXT
    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 [email protected]::assetHeight;
    	}-*/;
    
    	private native BaseEventPreview getEventPreview() /*-{
    		return [email protected]::eventPreview;
    	}-*/;
    
    	private native El getFooter() /*-{
    		return [email protected]::footer;
    	}-*/;
    
    	private native InputElement getHiddenInput() /*-{
    		return [email protected]::hiddenInput;
    	}-*/;
    
    	public String getRawSeparator() {
    		return rawSeparator;
    	}
    
    	@Override
    	public List<D> getSelection() {
    		return ((CheckBoxListView<D>) getView()).getChecked();
    	}
    
    	private native StoreListener<D> getStoreListener() /*-{
    		return [email protected]::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) /*-{
    		[email protected]::assetHeight = assetHeight;
    	}-*/;
    
    	private native void setFooter(El footer) /*-{
    		[email protected]::footer = footer;
    	}-*/;
    
    	private native void setInitialized(boolean initialized) /*-{
    		[email protected]::initialized = initialized;
    	}-*/;
    
    	private native void setList(LayoutContainer list)/*-{
    		[email protected]::list = list;
    	}-*/;
    
    	private native void setMode(String mode)/*-{
    		[email protected]::mode = mode;
    	}-*/;
    
    	private native void setPagingToolBar(PagingToolBar pageTb)/*-{
    		[email protected]::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);
    		}
    	}
    
    }
    Attached Images Attached Images

  2. #2
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    959

    Default

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

  3. #3
    Ext User
    Join Date
    Sep 2007
    Location
    Brazil
    Posts
    744

    Default

    I dont know.. needed test

  4. #4
    Ext User
    Join Date
    Jul 2009
    Location
    USA
    Posts
    3

    Default ComboBox with Multi Selection

    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;

  5. #5

    Default

    Quote Originally Posted by fother View Post
    I'm happy to announce more one plugin for GXT
    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, Ivn.

  6. #6
    Sencha Premium User
    Join Date
    Sep 2009
    Posts
    311

    Default

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

  7. #7

    Default

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

    Regards, Ivn.

  8. #8
    Sencha Premium User
    Join Date
    Sep 2009
    Posts
    311

    Default

    yes, I loose the password

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

  9. #9

    Default

    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, Ivn.

  10. #10
    Sencha User
    Join Date
    Mar 2010
    Posts
    62

    Default setSeleccion

    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.

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •