Modifier l'affichage d'un comboBox

Version imprimable

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:

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>

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:

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");
            });

18/05/2011, 14h48
hbomb

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 :)