Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Select: Difference between revisions

From PMISwiki

< Dojo Dijit and HTML5 in Real world applications‎ | Dijit

Jump to navigation Jump to search

Revision as of 03:25, 14 February 2012

dijit.form.Select

The use of dijit.form.Select described below can be tested in real life here. Use the "show source" function in your browser to see all code.

How to get a select with fixed width

To get a fixed with on a dijit.form.Select is difficult and a shortcoming of dijit: The only way (as I know of) is to use the style parameter within the widget. It does not work to define the width outside the widget or in CSS. It is important to use "overflow: hidden" as the no other overflow setting is supported. However, overflow: hidden is only partly supported as shown in the example.

The first example is implemented programmatically:

....
<head>
<script>
....
    dojo.ready( function() {
        var readStore =  new dojo.data.ItemFileReadStore({data:dojo.clone(data1)});
        var sel8 = new dijit.form.Select({
                       onChange: function(val){ 
                           dijit.byId('s20').set('value', 'Key: '+ val +
                           ' Value: ' +dijit.byId('s8').get('displayedValue') );
                       }},"s8");
        sel8.setStore(readStore);
        sel8.set('style','width: 100px; overflow: hidden;');
    });		
</script>
</head>
<body class="claro" >
....
<label for="s8">Example 1a:&nbsp;</label>
<div id="s8"></div>
....

See full example and code here.

The second example is implemented declaratively:

....
</head>
<body class="claro" >
....
    <label for="s10">Example 2:&nbsp;</label>
		<select id="s10" data-dojo-id="s10" data-dojo-type="dijit.form.Select" style="width: 100px; overflow: hidden;"
         data-dojo-props=" name:'s10', 
                           store:new dojo.data.ItemFileReadStore({data:dojo.clone(data1)}),
                           value:'2',
                           style: 'width: 50px; overflow: hidden;'
                           ">
    <!-- value:'2' The identifier of the <option> to be selected (can't find documentation for this – but it works..)-->
		</select>
....

See full example and code here.

How to set default value on a dijit.form.Select

The example is implemented declaratively: The default is changed by another selector by using obj.set('value', val).

....
</head>
<body class="claro" >
....
	<label for="s11">Example 3:&nbsp;</label>
	<select id="s11" data-dojo-id="s11" data-dojo-type="dijit.form.Select"
                    data-dojo-props="name:'s11', 
                                     store:new dojo.data.ItemFileWriteStore({data:dojo.clone(data1)})">
	</select>

	<label for="s12">Example 4:&nbsp;</label>
	<select id="s12" data-dojo-id="s12" data-dojo-type="dijit.form.Select" 
                    data-dojo-props="name:'s12', 
                                     store:new dojo.data.ItemFileReadStore({data:dojo.clone(data1)}),
                                     onChange: function(val){dijit.byId(s11).set('value', val); } ">
	</select>
....
</body>
</html>

See full example and code here.

The example is implemented declaratively: The default is defined at initialization (value:'2').

....
</head>
<body class="claro" >
....
    <label for="s10">Example 2:&nbsp;</label>
    <select id="s10" data-dojo-id="s10" data-dojo-type="dijit.form.Select" style="width: 100px; overflow: hidden;"
         data-dojo-props=" name:'s10', 
                           store:new dojo.data.ItemFileReadStore({data:dojo.clone(data1)}),
                           value:'2',
                           style: 'width: 50px; overflow: hidden;'
                           ">
    <!-- value:'2' The identifier of the <option> to be selected (can't find documentation for this – but it works..)-->
    </select>
....
</body>
</html>

See full example and code here.

Tips and tricks

    <!-- form elements -->

See full example and code here.

Verified in

IE8, IE9 (style: 'overflow: hidden' do not destroy the widget, but do not hide overflow either), Firefox 3.6.22, Firefox 10, Google Chrome 16, Dojo 1.6.1 (Do not work in Dojo 1.7.1; under investigation)

References

dojotoolkit: Demo and test of dijit.form.Select

Document History

Version	Date	Author	Status	Purpose of update
1	14 Feb 2012	PSA	Draft	New document.

Retrieved from "http://pmis.biz/mwiki/index.php?title=Dojo_Dijit_and_HTML5_in_Real_world_applications/Dijit/dijit.form.Select&oldid=431"