Objet Dojo créé dans une fonction et utilisé dans une autre.

**hapalemur** · 06/05/2009, 16h53

Bonjour à tous,
Je m'essaie à Dojo depuis quelques jours, et je suis confronté au pb suivant :
je crée un objet DataGrid dans une fonction, sur ce datagrid, je sélectionne 1 ou plusieurs lignes, et sur un clic ( dijit.form.Button ), je veux faire un traitement sur les lignes sélectionnées ( export vers un second DataGrid ) :

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
 
</script>
    .....
 
    function visuels1() {
        // définition de la structure:
        var jsonStore1 = new dojo.data.ItemFileReadStore({ .....});
        var mylayout1 = [ { field: 'champ1', name: 'Mes visuels' } ];
 
        // création d'un grid:
        var mygrid1 = new dojox.grid.DataGrid({
            query: {champ1: '*'},
            store: jsonStore1,
            clientSort: true,
            rowSelector: '20px',
            structure: mylayout1,
            title: 'Liste des visuels'
        }, document.createElement('td'));
 
         // ajouter le nouveau grid à la section td "myContainer1":
        dojo.byId("myContainer1").appendChild(mygrid1.domNode);
        // Init du tableau au lancement de la page
        mygrid1.startup();
    }
 
    function select() {
        var items = mygrid1.selection.getSelected();
        if(items.length){
		........
	}
    }
 
    function boutonSelection() {
 
         var mybouton = new dijit.form.Button({label: "SELECTIONNER", onClick: select}, document.createElement('td'));
        // ajouter le nouveau bouton à la section td "myContainer":
        dojo.byId("myContainer2").appendChild(mybouton.domNode);
    }
    dojo.addOnLoad(visuels1);
    dojo.addOnLoad(boutonSelection);
</script>

Dans la fonction select(), je dois faire référence à l'objet mygrid1, et évidemment, il n'est pas défini. Donc comment le référencer dans dojo pour je puisse y accéder.
Merci de votre collaboration.

**emmanuel.remy** · 06/05/2009, 23h50

C'est plus un problème de javascript: à partir du moment où tu as besoin d'appeler tes variables dans des contextes différents mets les en global.

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
<script>
    .....
    var jsonStore1=null ;
    var mygrid1 =null;  
   function visuels1() {
        // définition de la structure:
        jsonStore1 = new dojo.data.ItemFileReadStore({ .....});
        var mylayout1 = [ { field: 'champ1', name: 'Mes visuels' } ];
 
        // création d'un grid:
        mygrid1 = new dojox.grid.DataGrid({
            query: {champ1: '*'},
            store: jsonStore1,
            clientSort: true,
            rowSelector: '20px',
            structure: mylayout1,
            title: 'Liste des visuels'
        }, document.createElement('td'));
 
         // ajouter le nouveau grid à la section td "myContainer1":
        dojo.byId("myContainer1").appendChild(mygrid1.domNode);
        // Init du tableau au lancement de la page
        mygrid1.startup();
    }
 
    function select() {
        var items = mygrid1.selection.getSelected();
        if(items.length){
		........
	}
    }
 
    function boutonSelection() {
 
         var mybouton = new dijit.form.Button({label: "SELECTIONNER", onClick: select}, document.createElement('td'));
        // ajouter le nouveau bouton à la section td "myContainer":
        dojo.byId("myContainer2").appendChild(mybouton.domNode);
    }
    dojo.addOnLoad(visuels1);
    dojo.addOnLoad(boutonSelection);
</script>

ERE

**hapalemur** · 18/05/2009, 17h28

Bjr,
Tout d'abord, ( et avec retard ) merci pour les précisions; et après 2 semaines éloigné de l'informatique, je reprends mon exploration de Dojo.

Pour continuer sur les DataGrid, j'ai fait un prototypage rapide sur ce que je souhaite obtenir, et celà conduit à l'interface suivante : ( voir fichier joint : datagrid.png )

Je sélectionne une ou plusieurs lignes du tableau 1, et le bouton TRANSFERT permet de faire une copie des lignes vers le tableau 2
Le bouton SUPPRIMER permet de supprimer les lignes sélectionnées du tableau 2.

Tout ceci est obtenu par le 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
 
<html>
    <head>
        <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("dojox.grid._Grid");
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.form.Button");
            dojo.require("dojox.grid.DataGrid");
 
            var mygrid1 = null;
            var jsonStore1 = null;
            var mygrid2 = null;
            var jsonStore2 = null;
 
            function visuels1() {
                // définition de la structure:
 
                jsonStore1 = new dojo.data.ItemFileReadStore({ url: 'visuelsdis.json'});
 
                var mylayout1 = [
                    { field: 'champ1', name: 'Visuels disponibles' },
                    { field: 'champ2', name: 'Entité' }
                ];
 
                // création d'un grid:
                mygrid1 = new dojox.grid.DataGrid({
                    query: {champ1: '*', champ2: '*'},
                    store: jsonStore1,
                    clientSort: true,
                    autoWidth: true,
                    rowSelector: '20px',
                    structure: mylayout1,
                    title: 'Tableau1'
                }, document.createElement('td'));
                // ajouter le nouveau grid à la section td "myContainer":
                dojo.byId("myContainer1").appendChild(mygrid1.domNode);
 
                // Init du grid au lancement de la page
                mygrid1.startup();
            }
 
            function visuels2() {
                // définition de la structure:
                jsonStore2 = new dojo.data.ItemFileWriteStore({ url: 'visuelsel.json'});
 
                var mylayout2 = [
                    { field: 'champ1', name: 'Visuels sélectionnés' },
                    { field: 'champ2', name: 'Entité' }
                ];
 
                // création d'un grid:
                mygrid2 = new dojox.grid.DataGrid({
                    query: {champ1: '*', champ2: '*'},
                    store: jsonStore2,
                    clientSort: true,
                    autoWidth: true,
                    rowSelector: '20px',
                    structure: mylayout2,
                    title: 'Tableau2'
                }, document.createElement('td'));
                // ajouter le nouveau grid à la section td "myContainer":
                dojo.byId("myContainer3").appendChild(mygrid2.domNode);
 
                // Init du tableau au lancement de la page
                mygrid2.startup();
            }
 
 
            function transfert() {
                var column1 = null;
                var column2 = null;
                var items = mygrid1.selection.getSelected();
                if(items.length){
                    dojo.forEach(items, function(selectedItem) {
                        if(selectedItem !== null) {
                            column1 = jsonStore1.getValues(selectedItem,"champ1");
                            column2 = jsonStore1.getValues(selectedItem,"champ2");
                            jsonStore2.newItem({champ1: column1, champ2: column2});
                        } // end if
                    }); // end forEach
                } // end if
                else {
                    alert('Vous devez sélectionner 1 ou plusieurs visuels');
                }
            }
 
            function boutonTransfert() {
                //    var mybouton = new dijit.form.Button({img: "resources/images/selection.jpg"}, document.createElement('td'));
                var mybouton = new dijit.form.Button({label: "TRANSFERT", onClick: transfert}, document.createElement('td'));
                // ajouter le nouveau bouton à la section <td> "myContainer":
                dojo.byId("myContainer2").appendChild(mybouton.domNode);
            }
 
            function suppression() {
                // Suppression des lignes sélectionnées
                var row = mygrid2.removeSelectedRows();
            }
 
            function boutonSuppression() {
                var mybouton = new dijit.form.Button({label: "SUPPRIMER", onClick: suppression}, document.createElement('td'));
                // ajouter le nouveau bouton à la section td "myContainer":
                dojo.byId("myContainer4").appendChild(mybouton.domNode);
            }
 
            dojo.addOnLoad(visuels1);
            dojo.addOnLoad(visuels2);
            dojo.addOnLoad(boutonTransfert);
            dojo.addOnLoad(boutonSuppression);
 
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td id="myContainer1" style="width: 400px; height: 200px;"></td>
                <td id="myContainer2" style="width: 250px; height: 200px;"></td>
                <td id="myContainer3" style="width: 250px; height: 200px;"></td>
            </tr>
            <tr>
                <td> &nbsp; </td>
                <td> &nbsp; </td>
                <td id="myContainer4" style="width: 250px; height: 200px;"></td>
            </tr>
        </table>
    </body>
</html>

Mais il reste quelques questions en suspens :
- point 1 : dans les fonctions visuels1 et visuels2, pourquoi l'élément 'title' n'est-il pas affiché?

- point 2 : : fonction transfert

N'y a t'il pas une façon plus élégante de recopier les lignes du tableau 1 que d'aller chercher les attributs ( colonnes ) un à un ?

Comment une fois la recopie effectuée, supprimer la sélection (sur-brillance) des lignes du tableau 1 ?

- point 3 :

Lors de la recopie ( fonction transfert ), je peux parfois me retrouver avec des doublons dans jsonStore2 : comment les supprimer ? Dois-je itérer sur tout le store et avec quelles fonctions de 'matching' ?

Comment, une fois la recopie effectuée, effectuer automatiquement un tri sur la 1-ère colonne sans passer par un clic sur l'en-tête de la colonne ? ( j'ai bien essayé mygrid2.sort() : sans effet ... ).

Quelques remarques pour terminer : Développeur essentiellement Java et BD, les pages web ne concernent que 10 à 15% de mon activité : et vu la complexité de prise en main d'un framework comme Dojo, je me demande si c'est un choix pertinent; et quel serait dans ce cas le framework javascript le plus adapté? ( c'est sans doute assez impertinent de poster cette question sur un forum Dojo

, mais comme les spécialistes en ont sans doute essayé plusieurs ...).
Merci de vos réponses.

**emmanuel.remy** · 18/05/2009, 23h50

- point 1 : dans les fonctions visuels1 et visuels2, pourquoi l'élément 'title' n'est-il pas affiché?

A priori il n'existe pas d'attribut title pour une grid

- point 2 : : fonction transfert

N'y a t'il pas une façon plus élégante de recopier les lignes du tableau 1 que d'aller chercher les attributs ( colonnes ) un à un ?

utilise dojo.clone(item) pour obtenir une copie de ton item

Comment une fois la recopie effectuée, supprimer la sélection (sur-brillance) des lignes du tableau 1 ?

grid1.selection.deselectAll();

- point 3 :
Lors de la recopie ( fonction transfert ), je peux parfois me retrouver avec des doublons dans jsonStore2 : comment les supprimer ? Dois-je itérer sur tout le store et avec quelles fonctions de 'matching' ?

Désolé, mais je crois bien que c'est à toi de vérifier

Comment, une fois la recopie effectuée, effectuer automatiquement un tri sur la 1-ère colonne sans passer par un clic sur l'en-tête de la colonne ? ( j'ai bien essayé mygrid2.sort() : sans effet ... ).

grid2.setSortIndex(0,true);

Quelques remarques pour terminer : Développeur essentiellement Java et BD, les pages web ne concernent que 10 à 15% de mon activité : et vu la complexité de prise en main d'un framework comme Dojo, je me demande si c'est un choix pertinent; et quel serait dans ce cas le framework javascript le plus adapté? ( c'est sans doute assez impertinent de poster cette question sur un forum Dojo , mais comme les spécialistes en ont sans doute essayé plusieurs ...).

C'est effectivement le souci avec les frameworks. Ils sont tellement vastes que la courbe d'apprentissage présente parfois au début une pente peu importante. A mon avis (et cela n'engage que moi

) les frameworks couvrent 2 grands domaines. D'abord ils fournissent d'excellentes fonctions qui sont multi-navigateurs (gestion des événements, accès au DOM, ...) et ensuite ils disposent de widgets (pas tous, mais bon...). Donc c'est autant de domaines qui nécessitent des investissements en temps.
Si tu te limites uniquement aux domaines de bases, alors la courbe d'apprentissage est bien meilleure, mais alors adieu aux widget... La quadrature n'est pas très loin...

ERE

**hapalemur** · 20/05/2009, 14h02

Hello,

Les éclaircissements que tu apportes vont me permettre de modifier la fonction transfert; mais j'aurais encore besoin de préciser :

clone(item) :

je dois en faire une mauvaise application, mais :

Code :

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

1
2
 
  jsonStore2.newItem(dojo.clone(selectedItem));

me renvoie une erreur : _1 is undefined

suppression doublons :

Lors du tri sur la colonne, les doublons sont consécutifs dans le Datagrid, alors que celà n'est pas reporté dans le store ( donc suppression beaucoup plus facile dans le Datagrid ); mais petit problème, mon itération sur le Datagrid 'tourne à vide' :

Code :

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

1
2
3
4
 
dojo.forEach(mygrid2.items, function(item){
                   alert('champ1: ' + item.champ1);
	});

Pour revenir aux questions plus générales au sujet des frameworks, je dirais :
- concernant Dojo, j'ai un Pb de lisibilité de l'API qui n'est pas destinée à un débutant, donc je me reporte à la lecture de tutoriels.
- pour me faire un avis, je vais commencer par lire :
http://www.developpez.net/forums/d71...cript-prefere/.

**emmanuel.remy** · 20/05/2009, 18h24

Salut,

Pour revenir aux questions plus générales au sujet des frameworks, je dirais :
- concernant Dojo, j'ai un Pb de lisibilité de l'API qui n'est pas destinée à un débutant, donc je me reporte à la lecture de tutoriels.

Je développe pas mal d'applications et j'ai peut-être une perception biaisée de la chose. Est ce un problème lié à la connaissance du monde de l'objet ? Est ce un problème à la connaissance des notions d'événement et autres fonctions anonymes ? Toujours est il que tu n'es pas le premier à faire cette remarque vis à vis de l'API Dojo manquant de lisibilité et de là peu enclin à séduire les débutants ou ceux cherchant un rapide retour sur investissement. Je trouve navrant que Dojo n'ait pas fait cet effort de fournir une documentation digne de ce nom, destinée à la fois au débutant comme à l'initié. Note par ailleurs que c'est une des raisons qui incite l'équipe web de developpez.com à rédiger des articles de fond sur les principales fonctionnalités de Dojo.

Pour revenir à ton problème, ce qu'il faut bien comprendre c'est que tout item ajouté à un store ne l'est pas en l'état mais est enrichi par l'API du store avec de nouvelles propriétés. C'est ce qui explique le fait que dojo.clone ait échoué dans ton cas (je n'ai pas été assez vigilant en te proposant cette fonction

) . C'est ce qui explique aussi que pour accéder à un attribut de ton item il faille utiliser les fonctions du store:

Code :

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

1
2
//item.champ1 sera lu ainsi:
v= store1.getValue(item,'champ1')

Cela peut sembler étrange mais c'est ainsi...

Donc, pour remplacer la fonction clone, je te propose cette solution:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
dojo.declare("perso_ItemFileWriteStore", dojo.data.ItemFileWriteStore, {
     copy : function (item) {
        var atts = this.getAttributes(item);
        var copyObj = {};
        for (var i=0; i<atts.length; i++) {
            copyObj[atts[i]] = this.getValue(item,atts[i]);
        }
 
        return copyObj;
     }
});

Cela étend la class dojo.data.ItemFileWriteStore en ajoutant une fonction copy (j'ai préféré ce nom à clone).
A toi de remplacer ton dojo.data.ItemFileWriteStore par un perso_ItemFileWriteStore, puis à appeler

Code :

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

item =store1.copy(selectedItem);

Concernant les doublons, tu ne peux utiliser items car items est uniquement présent pour le cas où on n'utilise pas de store. Normalement si tout est fait correctement, tu ne dois pas avoir de doublon dans ta table cible car tu es protégé par la clé unique (l'identifier) et tout ajout d'un élément dont la clé est déjà présente dans le store déclenche une erreur Javascript "assertion failed in ItemFileWriteStore".

Bon dev,

ERE

**hapalemur** · 03/06/2009, 16h26

Bonjour,
Je reviens après qques développements parallèles;

Envoyé par emmanuel.remy

tout item ajouté à un store ne l'est pas en l'état mais est enrichi par l'API du store avec de nouvelles propriétés

Pour un newbie comme moi, c'est un peu trop subtil, et s'il y a beaucoup de choses de ce genre, je risque d'être souvent à côté de la plaque

La fonction copy telle que définie :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
            dojo.declare("my_ItemFileReadStore", dojo.data.ItemFileReadStore, {
                copy : function (item) {
                        var atts = this.getAttributes(item);
                        var copyObj = {};
                        for (var i=0; i<atts.length; i++) {
                            copyObj[atts[i]] = this.getValue(item,atts[i]);
                        }
                        return copyObj;
                    }
            });

fonctionne correctement dans le cadre 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
 
       jsonStore1 = new my_ItemFileReadStore({ url: 'visuelsdis.json'});
.......
       jsonStore2 = new dojo.data.ItemFileWriteStore({ url: 'visuelsel.json'});
.......
            function transfert() {
                var items = mygrid1.selection.getSelected();
                if(items.length){
                    dojo.forEach(items, function(selectedItem) {
                        if(selectedItem !== null) {
                            jsonStore2.newItem(jsonStore1.copy(selectedItem));
                        }
                    }); // end forEach
                    // unselect des lignes de mygrid1
                    mygrid1.selection.deselectAll();
                    // tri sur la 1-ère colonne de mygrid2
                    mygrid2.setSortIndex(0,true);
                } // end if
                else {
                    alert('Vous devez sélectionner 1 ou plusieurs visuels');
                }
            }

Mais je butte depuis quelques heures sur le pb des doublons : l'en tête de mes stores est renseigné comme suit :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
{'identifier': 'champ1',
'items':[{
    'champ1': 'viewFile 1',
    'champ2': 'Total',
},
{
    'champ1': 'viewFile 2',
    'champ2': 'Total',
},

et, après avoir indiqué en tête du fichier store le champ servant d'ID unique, si j'essaie de copier dans le jsonStore2 un élément qui s'y trouve déjà, il y a bien une exception :
Exception... "'Error: assertion failed in ItemFileWriteStore'.....

Alors, ou je me contente de laisser la chose en l'état; mais si un utilisateur un peu curieux décide d'activer Firefox/Firebug, le message concernant l'exception risque de l'inquiéter.
Donc pour éviter, si l'élément se trouve déjà dans jsonStore2, de faire l'appel

Code :

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

    jsonStore2.newItem(jsonStore1.copy(selectedItem));

j'essaie de faire une requête sur le store dans le genre :

Code :

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

jsonStore2.fetchItemByIdentity({identity:jsonStore1.getValues(selectedItem,"champ1"), onItem: copie = false});

Le booléan m'indiquant si je dois faire ou non la copie. Mais le résultat me donne toujours l'élément dans le jsonStore2 même s'il n'y est pas.
Déjà que j'ai un doute sur l'application de fetchItemByIdentity sur un ItemFileWriteStore : toujours la lisibilité de l'API ?

**emmanuel.remy** · 03/06/2009, 23h51

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
 
</script>
var mygrid1;
    .....
 
    function visuels1() {
        // définition de la structure:
        var jsonStore1 = new dojo.data.ItemFileReadStore({ .....});
        var mylayout1 = [ { field: 'champ1', name: 'Mes visuels' } ];
 
        // création d'un grid:
        mygrid1 = new dojox.grid.DataGrid({
            query: {champ1: '*'},
            store: jsonStore1,
            clientSort: true,
            rowSelector: '20px',
            structure: mylayout1,
            title: 'Liste des visuels'
        }, document.createElement('td'));
 
         // ajouter le nouveau grid à la section td "myContainer1":
        dojo.byId("myContainer1").appendChild(mygrid1.domNode);
        // Init du tableau au lancement de la page
        mygrid1.startup();
    }
 
    function select() {
        var items = mygrid1.selection.getSelected();
        if(items.length){
		........
	}
    }
 
    function boutonSelection() {
 
         var mybouton = new dijit.form.Button({label: "SELECTIONNER", onClick: select}, document.createElement('td'));
        // ajouter le nouveau bouton à la section td "myContainer":
        dojo.byId("myContainer2").appendChild(mybouton.domNode);
    }
    dojo.addOnLoad(visuels1);
    dojo.addOnLoad(boutonSelection);
</script>

ERE

**hapalemur** · 04/06/2009, 10h10

Hello,
Tout d'abord, merci à Emmanuel pour l'aide apportée.
Par ailleurs, l'objet du post ayant évolué au fil du temps, il serait plus parlant pour les utilisateurs du forum Dojo si les modos/admins pouvaient renommer l'intitulé du post en Manipulations sur 2 Datagrids.
Et pour terminer, ci-dessous le code complet qui permettra d'éviter de nombreux tatonnements aux débutants comme moi :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<html>
    <head>
        <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("dojox.grid._Grid");
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.form.Button");
            dojo.require("dojox.grid.DataGrid");
 
            dojo.declare("my_ItemFileReadStore", dojo.data.ItemFileReadStore, {
                copy : function (item) {
                        var atts = this.getAttributes(item);
                        var copyObj = {};
                        for (var i=0; i<atts.length; i++) {
                            copyObj[atts[i]] = this.getValue(item,atts[i]);
                        }
                        return copyObj;
                    }
            });
 
            var mygrid1 = null;
            var jsonStore1 = null;
            var mygrid2 = null;
            var jsonStore2 = null;
 
            function visuels1() {
                // définition de la structure :
                jsonStore1 = new my_ItemFileReadStore({ url: 'visuelsdis.json'});
 
                var mylayout1 = [
                    { field: 'champ1', name: 'Visuels disponibles' },
                    { field: 'champ2', name: 'Entité' }
                ];
 
                // création d'un grid:
                mygrid1 = new dojox.grid.DataGrid({
                    query: {champ1: '*', champ2: '*'},
                    store: jsonStore1,
                    clientSort: true,
                    autoWidth: true,
                    rowSelector: '20px',
                    structure: mylayout1
                }, document.createElement('td'));
                // ajouter le nouveau grid à la section td "myContainer":
                dojo.byId("myContainer1").appendChild(mygrid1.domNode);
 
                // Init du grid au lancement de la page
                mygrid1.startup();
            }
 
            function visuels2() {
                // définition de la structure:
                jsonStore2 = new dojo.data.ItemFileWriteStore({ url: 'visuelsel.json'});
 
                var mylayout2 = [
                    { field: 'champ1', name: 'Visuels sélectionnés' },
                    { field: 'champ2', name: 'Entité' }
                ];
 
                // création d'un grid:
                mygrid2 = new dojox.grid.DataGrid({
                    query: {champ1: '*', champ2: '*'},
                    store: jsonStore2,
                    clientSort: true,
                    autoWidth: true,
                    rowSelector: '20px',
                    structure: mylayout2
                }, document.createElement('td'));
                // ajouter le nouveau grid à la section td "myContainer":
                dojo.byId("myContainer3").appendChild(mygrid2.domNode);
 
                // Init du tableau au lancement de la page
                mygrid2.startup();
            }
 
 
            function transfert() {
                var items = mygrid1.selection.getSelected();
                if(items.length){
                    dojo.forEach(items, function(selectedItem) {
                        if(selectedItem !== null) {
                            jsonStore2.newItem(jsonStore1.copy(selectedItem));
                        }
                    }); // end forEach
                    // unselect des lignes de mygrid1
                    mygrid1.selection.deselectAll();
                    // tri sur la 1-ère colonne de mygrid2
                    mygrid2.setSortIndex(0,true);
                } // end if
                else {
                    alert('Vous devez sélectionner 1 ou plusieurs visuels');
                }
            }
 
            function boutonTransfert() {
                var mybouton = new dijit.form.Button({label: "TRANSFERT", onClick: transfert}, document.createElement('td'));
                // ajouter le nouveau bouton à la section <td> "myContainer":
                dojo.byId("myContainer2").appendChild(mybouton.domNode);
            }
 
            function suppression() {
                // Suppression des lignes sélectionnées
                var row = mygrid2.removeSelectedRows();
            }
 
            function boutonSuppression() {
                var mybouton = new dijit.form.Button({label: "SUPPRIMER", onClick: suppression}, document.createElement('td'));
                // ajouter le nouveau bouton à la section td "myContainer":
                dojo.byId("myContainer4").appendChild(mybouton.domNode);
            }
 
            dojo.addOnLoad(visuels1);
            dojo.addOnLoad(visuels2);
            dojo.addOnLoad(boutonTransfert);
            dojo.addOnLoad(boutonSuppression);
    </script>
    </head>
 
    <body>
        <table>
            <tr>
                <td id="myContainer1" style="width: 400px; height: 200px;"></td>
                <td id="myContainer2" style="width: 250px; height: 200px;"></td>
                <td id="myContainer3" style="width: 250px; height: 200px;"></td>
            </tr>
            <tr>
                <td> &nbsp; </td>
                <td> &nbsp; </td>
                <td id="myContainer4" style="width: 250px; height: 200px;"></td>
            </tr>
        </table>
    </body>
</html>

Et avec le format suivant pour les fichiers JSON :

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
{'identifier': 'champ1',
'items':[{
    'champ1': 'viewFile 1',
    'champ2': 'Total',
},
{
    'champ1': 'viewFile 2',
    'champ2': 'Total',
},
{
    'champ1': 'viewFile 4',
    'champ2': 'Recta',
},
{
    'champ1': 'viewFile 5',
    'champ2': 'Total',
},
{
    'champ1': 'viewFile 11',
    'champ2': 'Lawson',
}]
}

**emmanuel.remy** · 04/06/2009, 17h29

Salut,

Félicitations pour avoir abouti !

Juste une observation: pourquoi as tu créé manuellement tes boutons et ne les as tu pas mis directement dans le code HTML ? Y a-t-il une raison particulière ? As tu rencontré un souci ?

ERE

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

Bjr,
Pour justifier mon choix d'utiliser des boutons créés par dojo/javascript plutôt qu'insérés directement dans le code HTML, j'avancerais 3 arguments :
- j'ai déjà utilisé cette méthode pour avoir des boutons sur toute une colonne d'un Datagrid;
- je dois utiliser cette structure sur plusieurs pages, donc je vais factoriser dans un fichier javascript;
- je ne vois pas quel est l'apport de dojo/javascript si je déclare le bouton dans le code ( si, peut-être de nouvelles fonctionnalités apportées par Dojo ??? ) par rapport à la construction d'un bouton classique HTML ( voir à ce sujet le post que je viens de lancer sur une Checkbox que je construis de 2 façons différentes ).

Il est certain qu'un habitué de HTML/javascript aura sans doute une approche différente, mais moi je constate que pour l'instant je ne suis pas très efficace : je consacre 35 à 40% de mon temps sur des pbs de code et le reste sur l'appli elle-même, alors que dans mon domaine habituel ( java ) c'est 15% sur le code et le reste sur l'appli : il y a une logique dans l'univers Java que j'ai relativement bien appréhendée, ce n'est pas encore le cas de HTML, javascript et des domaines connexes.

Objet Dojo créé dans une fonction et utilisé dans une autre. [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager