1. #1
    Ext User fother's Avatar
    Join Date
    Sep 2007
    Location
    Brazil
    Posts
    744
    Vote Rating
    -1
    fother is an unknown quantity at this point

      0  

    Default ComboBox with Multi Selection

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

  2. #2
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    0
    Arno.Nyhm is on a distinguished road

      0  

    Default


    i see at the attached images it is also possible with paging. but: are the selected items also remembered after page changing?
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  3. #3
    Ext User fother's Avatar
    Join Date
    Sep 2007
    Location
    Brazil
    Posts
    744
    Vote Rating
    -1
    fother is an unknown quantity at this point

      0  

    Default


    I dont know.. needed test

  4. #4
    Ext User
    Join Date
    Jul 2009
    Location
    USA
    Posts
    3
    Vote Rating
    0
    Ammiddeon is on a distinguished road

      0  

    Default ComboBox with Multi Selection

    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
    Ext User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    lmivan is on a distinguished road

      0  

    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, Iván.

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    289
    Vote Rating
    0
    diegolovison is on a distinguished road

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    lmivan is on a distinguished road

      0  

    Default


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

    Regards, Iván.

  8. #8
    Sencha User
    Join Date
    Sep 2009
    Posts
    289
    Vote Rating
    0
    diegolovison is on a distinguished road

      0  

    Default


    yes, I loose the password

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

  9. #9
    Ext User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    lmivan is on a distinguished road

      0  

    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, Iván.

  10. #10
    Sencha User
    Join Date
    Mar 2010
    Posts
    62
    Vote Rating
    0
    maqjav is on a distinguished road

      0  

    Default setSeleccion

    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.