Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.form.Select: Difference between revisions
(Created page with "==dijit.form.Select== ==How to use== ==Tips and tricks== <syntaxhighlight lang="html5"> <!-- form elements --> </syntaxhighlight> ====Verified in==== IE 8, Firefox 3.6.2...") |
No edit summary |
||
(One intermediate revision by the same user not shown) | |||
Line 1: | Line 1: | ||
==dijit.form.Select== | ==dijit.form.Select== | ||
The use of dijit.form.Select described below can be tested in real life [http://pmis.biz/rwa/dijit.form.Select_1.php here]. Use the "show source" function in your browser to see all code. | |||
==How to | ==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: | |||
<syntaxhighlight lang="html5"> | <syntaxhighlight lang="html5"> | ||
<!-- | .... | ||
<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> | |||
.... | |||
</syntaxhighlight> | |||
See full example and code [http://pmis.biz/rwa/dijit.form.Select_1.php here]. | |||
The second example is implemented declaratively: | |||
<syntaxhighlight lang="html5"> | |||
.... | |||
</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> | |||
.... | |||
</syntaxhighlight> | </syntaxhighlight> | ||
See full example and code [http://pmis.biz/rwa/dijit.form.Select_1.php 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). | |||
<syntaxhighlight lang="html5"> | |||
.... | |||
</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> | |||
====Verified in | <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> | |||
</syntaxhighlight> | |||
See full example and code [http://pmis.biz/rwa/dijit.form.Select_1.php here]. | |||
The example is implemented declaratively: The default is defined at initialization (value:'2'). | |||
<syntaxhighlight lang="html5"> | |||
.... | |||
</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> | |||
</syntaxhighlight> | |||
See full example and code [http://pmis.biz/rwa/dijit.form.Select_1.php here]. | |||
==Store-based dijit.form.Select, but gets data from file (db)== | |||
Programmatic Implementation. | |||
See example and code [http://pmis.biz/rwa/dijit.form.Select_2.php 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== | ==References== | ||
[http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Select.html dojotoolkit: Demo and test of dijit.form.Select] | [http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Select.html dojotoolkit: Demo and test of dijit.form.Select] | ||
==Document History== | |||
{| class="wikitable" | |||
|- | |||
! Version | |||
! Date | |||
! Author | |||
! Status | |||
! Purpose of update | |||
|- | |||
| 1 | |||
| 14 Feb 2012 | |||
| PSA | |||
| Draft | |||
| New document. | |||
|- | |||
| | |||
| | |||
| | |||
| | |||
| | |||
|} | |||
[[Category:software development]] | [[Category:software development]] |
Latest revision as of 03:39, 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: </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. |