Creating & styling a list of radio buttons with dojo

I'm interested in creating a list of mutually-exclusive options in a nice list style with dojo. One issue I've come against however is what exactly the best approach to do this would be. I am creating the RadioButtons through code (not markup) as the options are determined by the result of an async.

Some specific questions:

o How do I cause the RadioButtons and their labels to have a block-like layout so that each one takes up a whole line? o What type of container should I use to hold the RadioButtons? o When there are more options than the container can display, how do I make sure that it is scrollable?

Any advice, tips or examples out there of some advanced UI design and structuring with dojo? Most books and people on #dojo on freenode a开发者_StackOverflowre saying it's still somewhat unexplored ground...

I've created an example of what I think you want at http://telliott.net/dojoExamples/dojo-fancyRadioButtons.html

Here you have a custom widget which extends Peter Higgins 'widgets within widgets' example from http://higginsforpresident.net/2010/01/widgets-within-widgets. I've renamed the base widget 'telliott.Widget' for my code.

To create the 'RadioContainer', you call

<script type="text/javascript">
    dojo.require('telliott.RadioContainer');
    dojo.addOnLoad(function() {
        var container1 = new telliott.RadioContainer({
            id: 'Container1',
            name: 'Container1',
            labels: ['one', 'two', 'three', 'The quick brown fox', 'Jumped over the lazy dog', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'Mauris vitae nunc non risus commodo sodales', 'Maecenas sed nibh et turpis laoreet volutpat at et sapien'],
            selected: 'two',
        }).placeAt(dojo.byId('container'));
    });
</script>

(obviously you can create the array of labels in advance from your XHR call or whatever)

The RadioContainer has some JS code:

dojo.provide('telliott.RadioContainer');

dojo.require('telliott.Widget');
dojo.require('dijit.form.RadioButton');

dojo.declare('telliott.RadioContainer', [telliott.Widget], {

    templateString: dojo.cache('telliott', 'templates/RadioContainer.html'),

    name: "", 

    postCreate: function() {
        this.labels = this.labels || []; 
        this.name = this.name || ""; 
        this.selected = this.selected || ""; 

        this.labels.forEach(dojo.hitch(this, function(l) {
            this.createRadio(l);
        }));
    },  

    createRadio: function(/* String */ label) {
        var item = dojo.create('li', null, this.containerNode, 'last');
        var nobr = dojo.create('nobr', null, item);
        var radio = this.adopt(dijit.form.RadioButton, {
            checked: this.selected == label ? true : false,
            value: label,
            name: this.name
        });
        radio.placeAt(nobr);
        this.createLabel(label, radio.get('id'), nobr);

    },  

    createLabel: function(/* String */ label, /* String */ idFor, /* Node */ location) {
        dojo.create('label', { for: idFor, innerHTML: label }, location, 'last');
    }    

});

and a template:

<div class="dijit dijitReset RadioContainer">
    <ul dojoAttachPoint="containerNode" class="dijit dijitReset contents"></ul>
</div>

along with some CSS:

  .claro .RadioContainer {
      overflow-y: auto;
      height: 100%;
  }

  .claro .RadioContainer .contents {
      padding: 10px;
      list-style: none;
  }

When you create the widget itself, you should then also specify it's width per instance using standard CSS, i.e:

#Container1 {
    width: 500px;
    background-color: white;
}

Internally, the widget is just creating an unordered list, wrapping the radio button and label in a <nobr> tag and adding this as an item in the list.

It would be fairly trivial to make this data store aware if that's what you wanted.