Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Select
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: </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: </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: </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: </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: </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.
Store-based dijit.form.Select, but gets data from file (db)
Programmatic Implementation. See 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. |