Ticket #6456: CheckedMultiSelect_radio-6456-2008-04-08_1345.diff

File CheckedMultiSelect_radio-6456-2008-04-08_1345.diff, 6.7 kB (added by nathan, 9 months ago)

Simple patch which adds radio-support (single-select) to CheckedMultiSelect?.

  • dojox/form/_FormSelectWidget.js

     
    33dojo.require("dijit.form._FormWidget"); 
    44 
    55dojo.declare("dojox.form._FormSelectWidget", dijit.form._FormWidget, { 
     6        // multiple: Boolean 
     7        //              Matches the select's "multiple=" value 
     8        multiple: "", 
     9         
    610        // _multiValue: Boolean 
    711        //              Whether or not we are multi-valued (for form) 
    812        _multiValue: false, 
    … …  
    140144        _updateSelection: function(){ 
    141145                // summary: 
    142146                //              Sets the "selected" class on the item for styling purposes 
     147                this.value = this._getValueFromOpts(); 
    143148                var val = this.value; 
    144149                if(!dojo.isArray(val)){ 
    145150                        val = [val]; 
    … …  
    151156                                }) ? "addClass" : "removeClass"](child.domNode, this.baseClass + "SelectedOption"); 
    152157                        }, this); 
    153158                } 
    154                 this.value = this._getValueFromOpts(); 
    155159                this._handleOnChange(this.value); 
    156160        }, 
    157161         
    … …  
    164168                        if(opt && opt.value){ 
    165169                                return opt.value 
    166170                        }else{ 
     171                                this.options[0].selected = true; 
    167172                                return this.options[0].value; 
    168173                        } 
    169174                }else if(this._multiValue){ 
    … …  
    177182                return ""; 
    178183        }, 
    179184         
     185        postMixInProperties: function(){ 
     186                this._multiValue = (this.multiple.toLowerCase() === "true"); 
     187                this.inherited(arguments); 
     188        }, 
     189         
    180190        _fillContent: function(){ 
    181191                // summary:   
    182192                //              Loads our options and sets up our dropdown correctly.  We  

  • dojox/form/tests/test_CheckedMultiSelect.html

     
    6363                                dojo.connect(ms1, "onChange", function(val){ 
    6464                                        console.log("First Select Changed to " + val); 
    6565                                }); 
     66                                dojo.connect(ss1, "onChange", function(val){ 
     67                                        console.log("First Radio Select Changed to " + val); 
     68                                }); 
    6669                        }); 
    6770                </script> 
    6871                <style> 
    … …  
    7780        </head>  
    7881        <body class="tundra"> 
    7982                <h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1> 
    80                 <h2>Automated test</h2> 
    8183                <form dojoType="dijit.form.Form" jsId="form"> 
     84                        <h2>Check Boxes</h2> 
    8285                        <select jsId="ms1" multiple="true" name="ms1" dojoType="dojox.form.CheckedMultiSelect"> 
    8386                                <option value="TN">Tennessee</option> 
    8487                                <option value="VA" selected="selected">Virginia</option> 
    … …  
    8689                                <option value="FL">Florida</option> 
    8790                                <option value="CA">California</option> 
    8891                        </select> 
    89                 <hr> 
    9092                        <select jsId="ms2" multiple="true" name="ms2" dojoType="dojox.form.CheckedMultiSelect"> 
    9193                                <option value="UT">Utah</option> 
    9294                                <option value="TX" selected="selected">Texas</option> 
    … …  
    9698                                <option value="OR">Oregon</option> 
    9799                                <option value="PA">Pennsylvania</option> 
    98100                        </select> 
    99                 <hr> 
    100101                        <select jsId="ms3" multiple="true" name="ms3" dojoType="dojox.form.CheckedMultiSelect"> 
    101102                        </select> 
    102103                <hr> 
     104                        <h2>Radio Buttons</h2> 
     105                        <select jsId="ss1" name="ss1" dojoType="dojox.form.CheckedMultiSelect"> 
     106                                <option value="TN">Tennessee</option> 
     107                                <option value="VA" selected="selected">Virginia</option> 
     108                                <option value="WA">Washington</option> 
     109                                <option value="FL">Florida</option> 
     110                                <option value="CA">California</option> 
     111                        </select> 
     112                        <select jsId="ss2" name="ss2" value="TX" dojoType="dojox.form.CheckedMultiSelect"> 
     113                                <option value="UT">Utah</option> 
     114                                <option value="TX">Texas</option> 
     115                                <option value="GA">Georgia</option> 
     116                                <option value="ID">Idaho</option> 
     117                                <option value="WY">Wyoming</option> 
     118                                <option value="OR">Oregon</option> 
     119                                <option value="PA">Pennsylvania</option> 
     120                        </select> 
     121                        <select jsId="ss3" name="ss3" dojoType="dojox.form.CheckedMultiSelect"> 
     122                        </select> 
     123                <hr> 
    103124                        <button dojoType="dijit.form.Button"> 
    104125                                <script type="dojo/method" event="onClick"> 
    105126                                        console.dir(form.getValues()); 
    … …  
    111132                                        numOptions++; 
    112133                                        ms3.addOption(numOptions + "", "Option " + (numOptions)); 
    113134                                </script> 
    114                                 Add Option 
     135                                Add Check Option 
    115136                        </button> 
    116137                        <button dojoType="dijit.form.Button"> 
    117138                                <script type="dojo/method" event="onClick"> 
     139                                        numOptions++; 
     140                                        ss3.addOption(numOptions + "", "Option " + (numOptions)); 
     141                                </script> 
     142                                Add Radio Option 
     143                        </button> 
     144                        <button dojoType="dijit.form.Button"> 
     145                                <script type="dojo/method" event="onClick"> 
    118146                                        ms3.setAttribute("disabled", !ms3.disabled); 
    119147                                </script> 
    120148                                Toggle Disabled 

  • dojox/form/resources/_CheckedMultiSelectItem.html

     
    11<div class="dijitReset ${baseClass}" 
    2         ><input class="${baseClass}Box" dojoType="dijit.form.CheckBox" dojoAttachPoint="checkBox" dojoAttachEvent="_onClick:_changeBox" type="checkbox"  
     2        ><input class="${baseClass}Box" dojoType="dijit.form.CheckBox" dojoAttachPoint="checkBox"  
     3                dojoAttachEvent="_onClick:_changeBox" type="${_type.type}" baseClass="${_type.baseClass}" 
    34        ><div class="dijitInline ${baseClass}Label" dojoAttachPoint="labelNode" dojoAttachEvent="onmousedown:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick"></div 
    45></div> 

  • dojox/form/CheckedMultiSelect.js

     
    2323        //              Whether or not this widget is disabled 
    2424        disabled: false, 
    2525 
     26        postMixInProperties: function(){ 
     27                // summary: 
     28                //              Set the appropriate _subClass value - based on if we are multi- 
     29                //              or single-select 
     30                if(this.parent._multiValue){ 
     31                        this._type = {type: "checkbox", baseClass: "dijitCheckBox"}; 
     32                }else{ 
     33                        this._type = {type: "radio", baseClass: "dijitRadio"}; 
     34                } 
     35                this.inherited(arguments); 
     36        }, 
     37 
    2638        postCreate: function(){ 
    2739                // summary: 
    2840                //              Set innerHTML here - since the template gets messed up sometimes 
    … …  
    3446        _changeBox: function(){ 
    3547                // summary: 
    3648                //              Called to force the select to match the state of the check box 
    37                 //              (only on click of the checkbox) 
    38                 this.option.selected = this.checkBox.getValue() && true; 
    39  
     49                //              (only on click of the checkbox)  Radio-based calls setValue 
     50                //              instead. 
     51                if(this.parent._multiValue){ 
     52                        this.option.selected = this.checkBox.getValue() && true; 
     53                }else{ 
     54                        this.parent.setValue(this.option.value); 
     55                } 
    4056                // fire the parent's change 
    4157                this.parent._updateSelection(); 
    4258                 
    … …  
    86102 
    87103        baseClass: "dojoxMultiSelect", 
    88104 
    89         _multiValue: true, // for Form 
    90  
    91105        _mouseDown: function(e){ 
    92106                // summary: 
    93107                //              Cancels the mousedown event to prevent others from stealing