Textfield et JsonP

**souhail72** · 13/01/2017, 09h49

Bonjour
J'ai un service web qui me retourne des valeurs en Json et ca fonctionne.
Je souhaite afficher ces valeurs dans un textfield, par contre la je bloque sur la façon de faire ?
Help me please ...

**Watilin** · 13/01/2017, 14h27

Je ne sais pas où tu bloques. Tu as essayé quelque chose déjà ? Voilà comment je ferais :

une requête ajax pour récupérer le JSON ;
je récupère une référence sur le textfield s’il existe déjà, sinon je le crée ;
rapidement, je formate le JSON pour le rendre plus lisible si besoin ;
je mets à jour la value du textfield.

Montre-nous ce que tu as déjà essayé.

**souhail72** · 13/01/2017, 15h37

Alors pour ce que j'ai fait
Le service web est ok, je récupère des données quand j’exécute le service web.
Le store et le model sont ok du coté web
Donc j'ai réalisé, la vue, le controleur , le store et le model

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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
onScanSN: function(button, e, eOpts) {
 
        var SerialNumber = Ext.getCmp("NameID").getValue();
 
        if(SerialNumber !== null)
        {
            if (SerialNumber.length == 6  || SerialNumber.length == 7  || SerialNumber.length == 8  )
            {
 
                var URL = 'http://v010048/WebSetup_WS_TAO/Service1.asmx/Liste_Machine_Accord_Poste_Destruction_Scan?callback=Ext.data.JsonP.callback1';
 
                Ext.data.JsonP.request({
 
 
                    url : URL,
                    method: 'GET',
                    params: { NS_Retour : SerialNumber},
                    timeout : 5000,
                    disableCaching: false,
                    callbackKey: 'callback',
                    callback: 'callback',
                    scope: this,
                    //Le web service est en mode sans Echec, il repond à la requette qu'on lui adresse
                    success: function(response){
                         // Si la reponse du Webservice est OK, cad qu'il existe une ou plusieurs correspondances   
                        if (response[1].Value == "PASS" ) 
                        {
 
                            Ext.Msg.show({
                                title: 'Neopost Industrie',
                                html: '<H1><Center>NumÃ©ro de sÃ©rie = "'+SerialNumber+'"</H1>',
                                message: 'La machine correspond Ã* un accord Poste, Vous allez dÃ©clencher le processus de destruction.',
                                width: 300,
                                closable : false,
                                buttons: [
                                {text: 'Retour Scan', itemId: 'yes', ui: 'action'},
                                {text: 'Valider Destruction', itemId: 'no', ui: 'decline'}
                                ],
                                fn: function (itemId)
                                {
                                    if('yes'==itemId)
                                    {
                                        Ext.getCmp("NameID").setValue("Scannez vÃ´tre NumÃ©ro de sÃ©rie");
                                    }
                                    else
                                    {
                                        //- TRAITEMENT ET RETOURS DATA ---------------------------------------------------------------------//
 
                                        Ext.Viewport.add({
                                            xtype: 'resultatScan' ,
                                            items: [
                                            // --------------------------------//
                                            {
                                                xtype: 'label',
                                                style: 'font-size: 14px',
                                                html: "<H1><center>OpÃ©ration de destruction autorisÃ©, Veuillez choisir votre carcasse svp ... !</H1>",
                                                padding: '0 0 0 0'
                                            },
                                            // -----------------------------------------------------------------//
                                            // Remplissage de la liste déroulante par le resultat du serviceWeb //
                                            // -----------------------------------------------------------------//
                                            {
                                                xtype: 'selectfield',
                                                flex: 1,
                                                itemId: 'ListeSN',
                                                maxHeight: 50,
                                                label: 'Liste de(s) Carcasse(s)',
                                                Store: LoginApp.store.ListeMachineScan,
                                                options: [
                                                {
                                                    text: 'Veuillez choisir votre Carcasse ... !',
                                                    value: 'Texte'
                                                },
                                                {
                                                    text: 'SN : '+SerialNumber,
                                                    value: 'Var1'
                                                },
 
                                                ],
                                                usePicker: false
                                            },
                                            // -----------------------------------------------------------------//
                                            //                              FIN                                 //
                                            // -----------------------------------------------------------------//
                                            {
                                                xtype: 'container',
                                                layout: {
                                                    type: 'hbox',
                                                    align: 'center',
                                                    pack: 'center'
                                                },
                                                // ***************************************** //
                                                items: [
                                                    {
                                                    xtype: 'toolbar',
                                                    items: [
                                                        {
                                                            xtype: 'spacer'
                                                        },
                                                        {
                                                            xtype: 'button',
                                                        handler: function(button, e)
                                                        {
                                                            this.up('panel').close();
                                                        },
                                                            ui: 'action',
                                                            width: 100,
                                                            text: 'Annuler'
                                                        }
                                                    ]
                                                },
                                                {
                                                    xtype: 'button',
                                                    handler: function(button, e)
                                                    {
                                                        this.up('panel').close();
                                                    },
                                                    ui: 'decline',
                                                    width: 160,
                                                    text: 'Sauvegarder'
                                                }
                                                ]
                                            }
                                            // --------------------------------//
                                            ],
                                            scope   : this,
                                        });
 
 
 
                                        //-------------------------------------------------------------------------------------------------//
 
                                    }
 
 
                                }
                            });
 
 
                        }
                        // La reponse du webservic est Non, cad il existe pas de correspondance
                        else 
                        {
                            Ext.Msg.alert("Neopost Industrie", "Il n'existe aucune correspondance pour cette machine SN = "+SerialNumber+", Aucun accord de la Part de la Poste pour sa destruction. Merci ", this);
                        }
                        Ext.getCmp("NameID").setValue("Scannez vÃ´tre NumÃ©ro de sÃ©rie");
                    },
                    // Le webservice est en mode Echec    
                    failure: function(response){
                        Ext.Msg.alert("Neopost Industrie", "Le service WS-TEO est actuellement injoignable, Merci de rÃ©essayer ultÃ©rieurement", this);
                    }
 
                });
 
 
                Ext.getCmp("NameID").setValue("Scannez vÃ´tre NumÃ©ro de sÃ©rie");
            }
 
            else
 
            {
                Ext.Msg.alert("Neopost Industrie", "Le numÃ©ro scannÃ© est incorrect,  NS Attendu = 6, 7 ou 8 CaractÃ©res", this);
                Ext.getCmp("NameID").setValue("Scannez vÃ´tre NumÃ©ro de sÃ©rie");
 
            }
        }
 
        else
 
        {
            // Envoi d'alerte au cas ou pas de saisie
            Ext.Msg.alert("Neopost Industrie", "Aucunes Informations Transmise, veuillez scanner vÃ´tre machine svp ...!", this);
            Ext.getCmp("NameID").setValue("Scannez vÃ´tre NumÃ©ro de sÃ©rie");
        }
 
        //*-------------------------------------------------------------------------------------------------------------------------------------------//*
    }

**Watilin** · 18/01/2017, 13h40

Comme je te l’ai dit en privé, je ne connais pas bien ExtJS alors je vais improviser.

Ton textfield existe-t-il déjà dans la vue ? Sinon, il faut le rajouter. Pour la suite je vais supposer que tu as un élément 'jsonField'.

Je pense que tu peux ajouter ton instruction dès le début de la fonction success.

Code :

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

1
2
3
4
5
6
  success: function (response) {
    Ext.getComp('jsonField').setValue(response);
 
    …
 
  }

Reste à savoir de quelle façon tu as envie de formater le JSON. Au besoin, si tu n’y a pas déjà pensé, il y a console.log, mais aussi console.dir et console.table

(Voir console.)

**souhail72** · 18/01/2017, 15h17

Merci
au fait le retour json est :

Code :

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

callback([{"Key":"STATUT","Value":"PASS"},{"Key":"MessageType","Value":"PASS"},{"Key":"Message","Value":"0=CARCASSE IJ25 FISCAL RACHAT,1=CARCASSE IJ25 RACHAT"}])

avec cette ligne j'accede a l'ensemble ds valeurs
response[2].Value
par contre comment on peut mettre cette partie "Value":"0=CARCASSE IJ25 FISCAL RACHAT,1=CARCASSE IJ25 RACHAT" dans les champs du selectefield ?
merci

**abraxis** · 20/01/2017, 16h08

Bonjour,

Perso je te conseil de rajouter dans ton JSON plus de détails.

Code :

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

1
2
3
4
5
{
    "success": true,  // false selon la réponse du serveur 
    "count": x // Nombre de données retournées par le serveur
    "data": [{..... }] // Tableau de data que tu souhaite exploiter
}

Pour setter des données à un combobox tu peux utiliser la méthode

Code :

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

1
2
store.setData(newData);
// newData est un tableau de records que tu obtiens en réponse du serveur

**souhail72** · 23/01/2017, 13h47

Oui a la date d'ajourd'hui j'ai modifié notamment le json et quand j'apelle le Webservice, j'ai le resultat suivant :

Code :

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

callback([{"Key":"COUNTER","Value":"2"},{"Key":"PARTNUMBER_0","Value":"CARCASSE IJ25 FISCAL RACHAT"},{"Key":"PARTNUMBER_1","Value":"CARCASSE IJ25 RACHAT"},{"Key":"STATUT","Value":"PASS"}])

pour la partie sencha, j'ai mon code suivant mais j'arrive pas à matérialiser ce que je souhaite
au fait sur le combobox, je souhaite avoir les deux valeurs suivantes :
-CARCASSE IJ25 RACHAT
-CARCASSE IJ25 FISCAL RACHAT
et mon selectedfeiled est le 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
{
    xtype: 'selectfield',
    width: 500,
    flex: 1,
    itemId: 'ListeSN',
    maxHeight: 50,
    label: 'Liste de(s) Carcasse(s)',
    labelWrap: true,
    Store: 'ListeMachineScanStore',
    options: [
        {
            text: 'Veuillez choisir votre Carcasse ... !',
            value: 'Texte'
        },
        {
            text: store.setData(newData) //; listeCarcasse
        }
    ],
    // valueSelectCarcasse est le paramétre à passer dans le webservice pour mettre a jour (UPDATE) la table RDC-CORRESPONDANCE
    listeners: {
        change: function (field, valueSelectCarcasse) {
            valueSelectCarcasse = listeCarcasse
            Ext.Msg.alert('Neopost Industrie', valueSelectCarcasse, this);
        }
    },
    usePicker: false
},

Merci @ toi de ton aide

Textfield et JsonP

Ext JS / Sencha

Discussions similaires

Partager

Partager