Invisibilité d'une CheckBox crée dans une fonction javascript

**hapalemur** · 05/06/2009, 13h52

Hello à tous,
Après les Datagrid, je continue mon exploration des objets Dojo : je suis confronté au Pb que ma CheckBox est visible si je la déclare dans le code HTML, mais invisible si je la crée à partir d'une fonction javascript.
Je crée un tableau 1 ligne - 3 colonnes avec :
1-ère cellule : CheckBox crée comme un élément HTML ( dans ce cas quel avantage procure dojotype="dijit.form.CheckBox" par rapport à un élément <input type="checkbox" ... ? );
2-ème cellule : CheckBox crée à partir d'une fonction javascript puis ajoutée au DOM;
3-ème cellule : TextBox crée à partir d'une fonction javascript puis ajoutée au DOM;

Celà à partit du code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="resources/Dojo-1.3.0/dojo/dojo.js">
        </script>
 
        <style type="text/css">
            @import "resources/Dojo-1.3.0/dijit/themes/nihilo/nihilo.css";
            @import "resources/Dojo-1.3.0/dojox/grid/resources/Grid.css";
            @import "resources/Dojo-1.3.0/dojox/grid/resources/nihiloGrid.css";
 
            .dojoxGrid table {
                margin: 0;
            }
        </style>
 
        <script type="text/javascript">
        djConfig="parseOnLoad: true, isDebug: true";
        dojo.require("dijit.form.CheckBox");
        dojo.require("dijit.form.TextBox");
 
        function casacocher() {
            var mycase = new dijit.form.CheckBox({name: "checkb", value: "etat", checked: false,
                onChange: function(x){ alert('commute avec = ' + x + 'value = ' + checkb.attr('value') ); }
            }, document.createElement('td'));
            // ajouter la case la section td "maCase":
            dojo.byId("maCase").appendChild(mycase.domNode);
        }
 
        function zonetext() {
            var mytext = new dijit.form.TextBox({}, document.createElement('td'));
            // ajouter le nouveau bouton à la section td "monTexte":
            dojo.byId("monTexte").appendChild(mytext.domNode);
        }
 
        dojo.addOnLoad(casacocher);
        dojo.addOnLoad(zonetext);
    </script>
 
  </head>
 
  <body>
    <table border="2">
 
        <tr>
            <td>
                <input id="mycb" dojotype="dijit.form.CheckBox"
                       name="gnom" checked="checked" value="on"
                       type="checkbox"
                       style="width: 140px; height: 40px;"/>
                <label for="mycb"> Gestion Nom </label>
            </td>
            <td id="maCase" dojotype="dijit.form.CheckBox" style="width: 140px; height: 40px;">
            </td>
            <td id="monTexte" dojotype="dijit.form.TextBox"style="width: 140px; height: 40px;">
            </td>
        </tr>
 
    </table>
  </body>
</html>

Si les cellules 1 et 3 sont affichées dans le navigateur, la cellule 2 n'affiche aucun contenu, bien que l'élément soit présent quand je fais une inspection avec Firebug :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<td>
<input id="mycb" type="checkbox" style="width: 140px; height: 40px;" value="on" checked="checked" name="gnom" dojotype="dijit.form.CheckBox"/>
<label for="mycb"> Gestion Nom </label>
</td>
<td id="maCase" style="width: 140px; height: 40px;" dojotype="dijit.form.CheckBox">
<div class="dijitReset dijitInline dijitCheckBox" wairole="presentation" role="presentation" widgetid="dijit_form_CheckBox_0">
<input id="dijit_form_CheckBox_0" class="dijitReset dijitCheckBoxInput" type="checkbox" dojoattachevent="onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick" dojoattachpoint="focusNode" name="checkb" value="etat" tabindex="0" aria-pressed="false" style="-moz-user-select: none;"/>
</div>
</td>
<td id="monTexte" style="width: 140px; height: 40px;" dojotype="dijit.form.TextBox">
<input id="dijit_form_TextBox_0" class="dijit dijitReset dijitLeft dijitTextBox" type="text" autocomplete="off" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse" dojoattachpoint="textbox,focusNode" tabindex="0" widgetid="dijit_form_TextBox_0" value=""/>
</td>

Je remarque cependant la présence de <div> ....</div> qui est absent dans le cas de la TextBox de la cellule 3.
Par ailleurs, lorsque je fais un clic sur la 2-ème cellule, j'obtiens checkb is not defined
Une idée avant que je n'abandonne cette façon de procéder?