Modifier l'affichage d'un comboBox

**hbomb** · 17/05/2011, 17h11

bonjour

voilà j'ai un souci d'affichage avec une comboBox. j'aimerai pouvoir afficher dans la liste déroulante, le nom d'un article avec son prix.
Ces données sont définies dans un ItemFileReadStore (voir le code ci-dessous).

Je suppose qu'il faut utiliser des templates, mais là franchement, je suis un peu perdu. j'ai cherché sur le net mais sans grand succès... j'ai bien trouvé des exemples pour afficher des boutons etc, mais rien sur les combo box (ou alors c'est la fatigue qui me fait mal chercher ^^ )

si vous avez une idée, je suis preneur!

merci d'avance

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
 
<html>
  <head>
        <script src="../lib/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
        <script>
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dijit.form.ComboBox");
 
            var storeData3 = {
                identifier: 'name',
                items: [{
                    name: 'Balsamic vinegar',
                    aisle: 'Condiments',
                    price: 4.01
                },
                {
                    name: 'Basil',
                    aisle: 'Spices',
                    price: 3.59
                },
                {
                    name: 'Bay leaf',
                    aisle: 'Spices',
                    price: 2.01
                }]
            };                   
 
            var foodStore=new dojo.data.ItemFileReadStore({data: storeData3});
 
            dojo.addOnLoad(function () {               
                var select=new dijit.form.ComboBox({
                    store: foodStore,
                    autoComplete: false,
                    searchAttr: "name"
                }, "nameBox");
            });                           
        </script>
        <link rel="stylesheet" type="text/css" href="../lib/dojo/dijit/themes/claro/claro.css"
        />
    </head>
 
    <body class=" claro ">
      <br><br>
      <div id="nameBox"></div>
    </body>
</html>

**Daniel_Gibot** · 18/05/2011, 14h26

Bonjour,

Il vous suffit de distinguer l'identifier du label.

Identifier : valeur retournée à la saisie (value)
Label : valeur affichée dans la combo (displayedValue)
Par exemple :

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
var storeData3 = {
                identifier: 'name',
                label:'nameprice',
                items: [{
                    name: 'Balsamic vinegar',
                    aisle: 'Condiments',
                    price: 4.01,
                    nameprice:'Balsamic vinegar - 4.01'
                }
...

            dojo.addOnLoad(function () {               
                var select=new dijit.form.ComboBox({
                    store: foodStore,
                    autoComplete: false,
                    searchAttr: "nameprice"
                }, "nameBox");
            });

**hbomb** · 18/05/2011, 14h48

bonjour

Merci pour ta réponse, c'est ce que j'ai fait ce matin et ça fonctionne bien

Donc j'ai un nouveau champ dans "items" qui correspond à l'affichage dans la liste déroulante. j'ai un petit truc en plus pour récupérer la valeur "name" des items afin de pouvoir le traiter par la suite.

merci encore

Modifier l'affichage d'un comboBox [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager