Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 27

Thread: ComboBox with Multi Selection

  1. #11

    Default

    hello,Can treePanel in listView?

  2. #12
    Sencha Premium User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    888

  3. #13

    Default

    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?

  4. #14
    Sencha Premium User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    888

    Default

    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.

  5. #15

    Default

    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/showthre...Facebook-s-one)
    So can you guide me..how can i do it...

  6. #16

    Default

    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/showthre...Facebook-s-one)
    in GXT.

  7. #17
    Sencha Premium User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    888

    Default

    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.

  8. #18

    Default

    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?

  9. #19

    Talking

    Appreciate your efforts fother!! Nice Plugin!

    & micgala for taking time to post the link to the updated code!

  10. #20
    Ext GWT Premium Member
    Join Date
    Jul 2009
    Posts
    104

    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 [email protected]::eventPreview;
        }-*/;
    
        private native El getFooter() /*-{
            return [email protected]::footer;
        }-*/;
    
        private native InputElement getHiddenInput() /*-{
            return [email protected]::hiddenInput;
        }-*/;
    
        private native StoreListener<D> getStoreListener() /*-{
           return [email protected]::storeListener;
        }-*/;
    
        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 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);
            }
        }
    
    }

Page 2 of 3 FirstFirst 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
  •