1. #21
    Ext GWT Premium Member
    Join Date
    Jul 2009
    Posts
    104
    Vote Rating
    0
    VadimV1144 is on a distinguished road

      0  

    Default


    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()):
    Code:
        @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:
    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);
            }
        }
    
    }

  2. #22
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    chenli868 is on a distinguished road

      0  

    Default


    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.

  3. #23
    Sencha User
    Join Date
    Feb 2010
    Location
    Netherlands
    Posts
    20
    Vote Rating
    0
    stiptkevin is on a distinguished road

      0  

    Default


    The setSelection is indeed not working correctly

  4. #24
    Sencha User
    Join Date
    Feb 2010
    Location
    Netherlands
    Posts
    20
    Vote Rating
    0
    stiptkevin is on a distinguished road

      0  

    Default


    It seems that clearSelection() is also not working.

  5. #25
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    867
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    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.

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

      0  

    Default


    I update the source code




    Code:
    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());
    	}
    
    }

  7. #27
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    raj_s37 is an unknown quantity at this point

      0  

    Default ComboBox with Multi Selection inside the editor grid

    ComboBox with Multi Selection inside the editor grid


    please provide some examples / how to integrate the ComboBox with Multi Selection with in the editor grid

  8. #28
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    prithvig is on a distinguished road

      0  

    Default XMultiComboBox

    XMultiComboBox


    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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar