Results 1 to 6 of 6

Thread: Radio button ListView

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext GWT Premium Member
    Join Date
    Jul 2009
    Posts
    104

    Default Radio button ListView

    Here is a little widget that may be useful. I have modified the CheckBoxListView to :
    a) Allow user to check multiple boxes without holding down the 'Ctrl' key.
    b) Display the Radio buttons instead of the Checkboxes.

    Code:
    import com.extjs.gxt.ui.client.GXT;
    import com.extjs.gxt.ui.client.Style;
    import com.extjs.gxt.ui.client.core.XTemplate;
    import com.extjs.gxt.ui.client.data.ModelData;
    import com.extjs.gxt.ui.client.event.ListViewEvent;
    import com.extjs.gxt.ui.client.widget.CheckBoxListView;
    import com.extjs.gxt.ui.client.widget.ListViewSelectionModel;
    import com.google.gwt.user.client.Element;
    
    import java.util.Arrays;
    import java.util.List;
    
    public class XRadioListView<M extends ModelData> extends CheckBoxListView<M> {
        private Boolean isRadio = false;
        private String groupName = "";
        private String selectionProperty = "";
    
        private static final String CHECKED_PROPERTY_ID = "checked";
    
        /**
         * Default Constructor. Sets the XListViewSelectionModel as default model
         * for this instance.
         */
        public XRadioListView(){
            super();
            setSelectionModel(new XListViewSelectionModel<M>());
        }
    
        /**
         * Sets the type of the buttons that will be displayed by this view.
         * As wells as the button group name.
         * @param isRadio - if true Radio buttons are displayed, otherwise display CheckBoxes
         * @param groupName - button group name
         */
        public void setRadio(Boolean isRadio, String groupName){
            this.isRadio = isRadio;
            this.groupName = groupName == null?"":groupName;
            if(getSelectionModel() instanceof XListViewSelectionModel){
                ((XListViewSelectionModel)getSelectionModel()).setKeepExisting(!isRadio);
            }
        }
    
        /**
         *  Return the selection property
         * @return property of the model that will be set/unset on the selection event
         */
        public String getSelectionProperty() {
            return selectionProperty;
        }
    
        /**
         * Set the selection property
         * @param selectionProperty will be set/unset on every selection event
         */
        public void setSelectionProperty(String selectionProperty) {
            if(selectionProperty != null && !selectionProperty.isEmpty())
                this.selectionProperty = selectionProperty;
        }
    
        /**
         * Initialise the button based on the selectionProperty
         * If the selectionProperty is set, the button will be selected
         * @param model is the bean model that associated with the given button
         */
        public void initSelection(M model){
            if(!selectionProperty.isEmpty()){
                if(model.<Boolean>get(selectionProperty)) {
                    this.getSelectionModel().select(model, true);
                }
                //model.set(CHECKED_PROPERTY_ID, getCheckedValue());
            }
        }
    
        /**
         * Sets the selectionProperty on the model based on the select value (true or false)
         * Sets the button selection based on the select value (this is necessary to handle the case
         * when the user clicks on the label and not the actual button)
         *
         * @param model - selected model
         * @param select - selection type - true if selected, false if deselected
         */
        protected void onSelectChange(M model, boolean select){
            if(!selectionProperty.isEmpty()){
                model.set(selectionProperty, select);
            }
            model.set(CHECKED_PROPERTY_ID,getCheckedValue(select));
            super.onSelectChange(model, select);
        }
    
        protected void onRender(Element target, int index) {
            String spacing = GXT.isIE ? "0" : "3";
            String type = isRadio?"radio":"checkbox";
            setTemplate(XTemplate.create("<tpl for=\".\"><div class='x-view-item x-view-item-check'>"
                    + "<table cellspacing='" + spacing + "' cellpadding=0> "
                    + "<tr>"
                    + "<td>"
                    + "<input class=\"x-view-item-checkbox\" type=\"" + type + "\" name=\"" + groupName + "\" {" + CHECKED_PROPERTY_ID + "}/>"
                    + "</td>"
                    + "<td>{" + getDisplayProperty() + "}"
                    + "</td>"
                    + "</tr></table></div></tpl>"));
            super.onRender(target, index);
        }
    
        private String getCheckedValue(boolean checked){
            return checked?"checked":"";
        }
    
        public class XListViewSelectionModel<M extends ModelData> extends ListViewSelectionModel<M> {
            private Boolean keepExisting = false;
    
            public Boolean isKeepExisting() {
                return keepExisting;
            }
    
            public void setKeepExisting(Boolean keepExisting) {
                this.keepExisting = keepExisting;
            }
    
            /**
             * Replaces the passed argument keepExisting with the local keepExisting.
             *
             * Note: This is necessary to allow user to select multiple options without
             * holding the Ctrl button
             */
            protected void doSelect(List<M> models, boolean keepExisting, boolean supressEvent) {
                super.doSelect(models, this.keepExisting, supressEvent);
            }
    
            /**
             * Bypass the check for the Ctrl button press.
             * 
             * Note: This is necessary to allow user to select multiple options without
             * holding the Ctrl button
             */
            @SuppressWarnings("unchecked")
            protected void handleMouseClick(ListViewEvent<M> e) {
                if (isLocked() || e.getIndex() == -1) {
                    return;
                }
                if (!e.isRightClick() && selectionMode == Style.SelectionMode.MULTI) {
                    M sel = listStore.getAt(e.getIndex());
                    if (isSelected(sel)) {
                        doDeselect(Arrays.asList(sel), false);
                    } else {
                        handleMouseClick(e);
                    }
                }
            }
        }
    }
    In order for the checkboxes to display in a ListView format add the following to your CSS:
    Code:
    #checkbox-view .x-view-item {
        float: left;
        margin: 4px;
        margin-right: 0;
        padding: 5px;
    }

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

    Default

    interesting. you have a screenshot?

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

    Default

    Here is a screen, both the radio buttons list and check boxes list are XRadioListView instances.

    RadioListView.JPG

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

    Default

    i replay your example with a copy of checkboxlistview and get not so nice results.

    it is also possible to post your example code for creating the items?

    chould the "#checkbox-view" not be better a css class .checkbox-view so i can addStyleName this to many objects?

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

    Default

    Oh yes, I call
    Code:
    panel.setId("checkbox-view");
    , where panel is a ContentPanel that contains the radio button list.

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

    Default

    Here is a full example, just import for the XRadioListView

    Code:
    import com.extjs.gxt.ui.client.Style;
    import com.extjs.gxt.ui.client.data.*;
    import com.extjs.gxt.ui.client.event.Events;
    import com.extjs.gxt.ui.client.event.Listener;
    import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.layout.FlowData;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    import com.google.gwt.user.client.ui.Widget;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class RadioButtonListViewEntry implements EntryPoint {
        @Override
        public void onModuleLoad() {
                LayoutContainer lc = new LayoutContainer();
    
                Modifier ex1 = new Modifier();
                ex1.setName("Exclusive Mod 1");
                ex1.setItems(getModItemsList(true));
                lc.add(getModifierPanel(ex1, true),new FlowData(10));
    
                Modifier com1 = new Modifier();
                com1.setName("Combinatorial Mod 1");
                com1.setItems(getModItemsList(true));
                lc.add(getModifierPanel(com1, false),new FlowData(10));
                RootPanel.get().add(lc);
        }
    
    
       private ContentPanel getModifierPanel(final Modifier mod, final Boolean isRadio){
    
            MemoryProxy<List<ModifierItemRecord>> proxy = new MemoryProxy<List<ModifierItemRecord>>(mod.getItems());
            ListLoader<ListLoadResult<ModifierItemRecord>> loader = new BaseListLoader<ListLoadResult<ModifierItemRecord>>(proxy, new BeanModelReader());
            ListStore<BeanModel> store = new ListStore<BeanModel>(loader);
            loader.load();
            final XRadioListView<BeanModel> view = new XRadioListView<BeanModel>() {
                @Override
                protected BeanModel prepareData(BeanModel model) {
                String s = model.get("name");
                    model.set("shortName", s + " ()");
                    initSelection(model);
                    return model;
                }
    
            };
            view.setRadio(isRadio, mod.getName());
            view.setStore(store);
            view.setWidth(370);
            view.setSelectionProperty("selected");
            view.setDisplayProperty("shortName");
    
            view.getSelectionModel().setSelectionMode(isRadio? Style.SelectionMode.SINGLE:Style.SelectionMode.MULTI);
            view.getSelectionModel().addListener(Events.SelectionChange,
                    new Listener<SelectionChangedEvent<BeanModel>>() {
                        public void handleEvent(SelectionChangedEvent<BeanModel> be) {
                            view.refresh();
                        }
    
                    });
    
            final ContentPanel panel = new ContentPanel();
            panel.setId("checkbox-view");
            panel.setCollapsible(false);
            panel.setHideCollapseTool(true);
            panel.setAnimCollapse(false);
            panel.setFrame(true);
            panel.setHeading(mod.getName());
            panel.setWidth(400);
            panel.setHeight(400);
            panel.setAutoHeight(true);
            panel.setBodyBorder(false);
            panel.add(view);
    
            return panel;
        }
        class Modifier  implements BeanModelTag {
            protected String name = "";
            protected List<ModifierItemRecord> items = new ArrayList<ModifierItemRecord>();
    
            public String getName() {
                return name;
            }
    
            public void setName(String name) {
                this.name = name;
            }
    
            public List<ModifierItemRecord> getItems() {
                return items;
            }
    
            public void setItems(List<ModifierItemRecord> items) {
                this.items = items;
            }
        }
    
        class ModifierItemRecord implements BeanModelTag {
            private String name = "";
            private Boolean selected = false;
    
            public String getName() {
                return name;
            }
    
            public void setName(String name) {
                this.name = name;
            }
    
            public Boolean isSelected() {
                return selected;
            }
    
            public void setSelected(Boolean selected) {
                this.selected = selected;
            }
        }
    
        private List<ModifierItemRecord> getModItemsList(boolean selected){
            List<ModifierItemRecord> list = new ArrayList<ModifierItemRecord>();
    
            ModifierItemRecord mod1 = new ModifierItemRecord();
            mod1.setSelected(selected);
            mod1.setName("Modifier 1");
            list.add(mod1);
    
            ModifierItemRecord mod2 = new ModifierItemRecord();
            mod2.setName("Modifier 2");
            list.add(mod2);
    
            ModifierItemRecord mod3 = new ModifierItemRecord();
            mod3.setName("Modifier 3");
            list.add(mod3);
    
            ModifierItemRecord mod4 = new ModifierItemRecord();
            mod4.setName("Modifier 4");
            list.add(mod4);
    
            ModifierItemRecord mod5 = new ModifierItemRecord();
            mod5.setName("Modifier 5");
            list.add(mod5);
    
            return list;
        }
    }

Posting Permissions

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