Json et Tableau Grid

Version imprimable

Bonjour à toutes et à tous

J'ai un service web qui me retourne des data sous un format JSON et je souhaite intégrer ces données dans un tableau Grid, donc j'ai créer un datastor et ca marche bien sauf que je rempli sur toute une ligne pas dans chaque colonne.

code pour data store
Code:

1 2 3 4 5 6 7 8 var ListeErrorJsonPStore = new Ext.data.Store({ autoLoad: true, storeId: 'MyStore', //fields: ['Key','Value'], data:response }); ListeErrorJsonPStore.load();
code pour Grid
Code:

1 2 3 4 5 6 columns: [{ text: 'OF', //flex: 1 , width: 115, dataIndex: 'value' }, ]
le retour JSON est de ce type ('Key','Value')

Code:

Ext.data.JsonP.callback1([{"Key":"STATUT","Value":"PASS"},{"Key":"COUNTER","Value":"3"},{"Key":"OF_Data_0","Value":"000011317359|SAP|Le nÂ° de timbre dans SAP n\u0027est pas valide !Erreur DATA SAP|31/03/2017 12:58:39|31/03/2017 13:10:30"},{"Key":"OF_Data_1","Value":"000011317360|SAP|Cette rÃ©fÃ©rence n\u0027existe pas dans la table de correspondance !SAP error|31/03/2017 12:58:39|31/03/2017 13:10:30"},{"Key":"OF_Data_2","Value":"000011389087|BIN CREATE|Erreur OLS Dienumber, pas de Retour OK du WebService NÂ° : 0000859851ND90770 {\"machineStatuses\":[{\"meterSerialNo\":\"0000859851ND90770\",\"status\":\"no system linked to device [0000859851ND90770] and Opco [3]\"}]}|31/03/2017 12:58:39|31/03/2017 13:10:30"}])

Merci de votre aide parce que là je bloque.

04/04/2017, 17h32
la_spi_man

Bonjour,

Quand vous dites 'remplir sur toute une ligne', il s'agit de quoi?
Que s'affiche t'il dans chaque colonne, ou une en particulière ? (peut être un Screenshot?)
Je ne vois pas de model lié au store.
05/04/2017, 15h49
souhail72

1 pièce(s) jointe(s)

Merci

Bonjour du retards
En effet le data que je récupère sont mis dans une cellule.
Merci @ vous
08/04/2017, 18h36
sekaijin

il ne s'agit pas de JSONP mais de JSON
il te faut un JSON store et faire un load de l'url de ton service

A+JYT
10/04/2017, 08h05
souhail72

Merci

Merci,
J'ai déja essayé avec le JSON mais ca ne marche pas...

vu que tu ne poste qu'un tout petit bout de code je ne sais pas ce que tu fait
un exemple du même genre
store CodeLieu.js

Code:

1
2
3
4
5
6
7
Ext.define('Gestion.store.CodeLieu', {
    extend : 'Ext.data.Store',
    model : 'Gestion.model.CodeLieu',
    remoteSort : true,
    pageSize : 100,
    autoLoad : false
});

model CodeLieu.js

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
Ext.define('Gestion.model.CodeLieu', {
    extend : 'Ext.data.Model',
    fields : [ {
        name : 'DIVISION',
        type : 'string'
    }, {
        name : 'MAGASIN',
        type : 'string'
    }, {
        name : 'CODE_LIEU',
        type : 'string'
    } ],
 
    proxy : {
        type : 'json',
        api : {
            read : 'gestion/codelieu.json', //ici url du service qui fournis les données
            update : 'gestion/codelieu.json'
        },
        reader : {
            type : 'json',
            root : 'codelieu', //ici le nom de la propriété contenant le tableau de valeurs
            totalProperty : 'total', //ici le nom dela propriété contenant le nombre total d’enregistrements (peut être différent du nombre retourné ex: pagination)
            successProperty : 'success' //propriété contenant true ou false si l'appel de service c'est bien passé ou pas.
        }
    }
});

vue codelieu/list.js

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
Ext.define('Gestion.view.codelieu.List', {
    extend : 'Ext.grid.Panel',
    alias : 'widget.codelieulist',
    requires : [ 'Ext.ux.grid.FiltersFeature' ],
 
    title : 'Codes Lieu',
 
    store : 'CodeLieu',
 
    features : [ {
        ftype : 'filters',
        encode : 'json',
        local : false
    } ],
    dockedItems : [ {
        xtype : 'pagingtoolbar',
        dock : 'bottom',
        displayInfo : true
    } ],
 
    initComponent : function() {
        this.dockedItems[0].store = this.store;
 
        this.columns = [ {
            header : 'Division',
            filterable : true,
            flex : 1,
            dataIndex : 'DIVISION'
        }, {
            header : 'Magasin',
            filterable : true,
            flex : 1,
            dataIndex : 'MAGASIN'
        }, {
            header : 'Code Lieu',
            filterable : true,
            flex : 2,
            dataIndex : 'CODE_LIEU'
        } ];
 
        this.callParent(arguments);
    }
});

et le controleur CodeLieu.js

Code:

1
2
3
4
5
6
7
8
9
Ext.define('Gestion.controller.CodeLieu', {
    extend : 'Ext.app.Controller',
 
    stores : [ 'CodeLieu' ],
    models : [ 'CodeLieu' ],
 
    views : [ 'codelieu.List' ]
 
});

et enfin le contenu json de la réponse du service les propriété de l'objet doivent correspondre à celles définie dans le reader du proxy

Code:

1
2
3
4
5
6
7
8
9
10
11
12
{
 "total":910,
 "codelieu":[
  {"CODE_LIEU":"ATBJ","DIVISION":"005","R":"1","MAGASIN":"ATBJ"},{"CODE_LIEU":"BTBJ","DIVISION":"005","R":"2","MAGASIN":"BTBJ"},
  {"CODE_LIEU":"CHBJ","DIVISION":"005","R":"3","MAGASIN":"CHBJ"},{"CODE_LIEU":"DIBJ","DIVISION":"005","R":"4","MAGASIN":"DIBJ"},
  {"CODE_LIEU":"DMBJ","DIVISION":"005","R":"5","MAGASIN":"DMBJ"},{"CODE_LIEU":"DTBJ","DIVISION":"005","R":"6","MAGASIN":"DTBJ"},
  {"CODE_LIEU":"ECBJ","DIVISION":"005","R":"7","MAGASIN":"ECBJ"},{"CODE_LIEU":"GVBJ","DIVISION":"005","R":"8","MAGASIN":"GVBJ"},
  {"CODE_LIEU":"GZBJ","DIVISION":"005","R":"9","MAGASIN":"GZBJ"},{"CODE_LIEU":"HEBJ","DIVISION":"005","R":"10","MAGASIN":"HEBJ"},
  {"CODE_LIEU":"HOBJ","DIVISION":"005","R":"11","MAGASIN":"HOBJ"}
 ],
 "success":true
}

A+JYT

10/04/2017, 13h05
souhail72

merci

désolé sekaijin ...
Merci pour ton aide super gentil
10/04/2017, 14h56
souhail72

Hic

Au fait la sortie JSON correspond a un Key et value de ce type

Code:

([{"Key":"STATUT","Value":"PASS"},{"Key":"OF_0","Value":"000011317359|SAP|Le nÂ° de timbre dans SAP n\u0027est pas valide !Erreur DATA SAP|31/03/2017 12:58:39|31/03/2017 13:10:30"},{"Key":"OF_1","Value":"000011317360|SAP|Cette rÃ©fÃ©rence n\u0027existe pas dans la table de correspondance !SAP error|31/03/2017 12:58:39|31/03/2017 13:10:30"},{"Key":"OF_2","Value":"000011389087|BIN CREATE|Erreur OLS Dienumber, pas de Retour OK du WebService NÂ° : 0000859851ND90770 {\"machineStatuses\":[{\"meterSerialNo\":\"0000859851ND90770\",\"status\":\"no system linked to device [0000859851ND90770] and Opco [3]\"}]}|31/03/2017 12:58:39|31/03/2017 13:10:30"}])

je n'ai pas de sortie directe, l'ensemble des données corespondent a une value, aprés il faudrait spliter cette valeur mais la c'est problématique
12/04/2017, 17h39
sekaijin

si je comprends bien
tu charge bien toutes les valeurs et tu as bien toutes tes lignes

mais comme tes valeurs sont des string avec un séparateur tu as tout dans une seule colonne
autant de ligne que d'enregistrement mais une seul colonne

pour résoudre ça deux solutions
côté serveur ou cote client

si tu le fait côté serveur tu parcours ton json et tu en produit un nouveau avec les colonne qui vont bien id key texte date1 date2
tu adapte ton reader côté client et tu a tout dans les colonnes correspondante.
pour moi c'est la bonne façon de faire le client manipule ainsi un tableau de donnée cohérent.

si tu le fait côté client il te faut créer dans ta vue toutes les colonnes
dans la config de chaque colonne tu définie un attribut renderer qui prends sa valeur dans la seule et unique colonne de ton store et affiche que la donnée concernée par la colonne (return data.split('|')[2];)
cette solution à l'avantage de fonctionner sans modification du service mais le gros inconvénient que les tris les filtres ne fonctionneront pas de façon intuitives. il s'appliquent à la data et non au rendu.

A+JYT

Merci

Désolé du retard
j'ai appliqué a la lettre tes orientations franchement ca marche sauf 2 problemes :

1ere : avec le rendu, ca me ramene toujours le meme varaible
2eme : prend pas en compte l'ensemble
Code:

1 2 3 4 5 6 var liste = response[2].Value; var listeSortie = liste.split('|'); PartNumber = listeSortie[0]; var PartNumberRender = function(name, meta, record){ return PartNumber }
Code:

1 2 3 4 5 6 7 8 { header : 'Partnumber', align: 'left', width : '15%', id:'partNumber', dataIndex: 'Value', renderer:PartNumberRender },
Merci du soutien

Rebonjour Messieurs

j'ai changé mon service web du fait comme le disait Sekaijin, ca va etre compliqué en partie front de récupérer les données sans les travailler donc :

le retour json est le suivant :

Code:

1
2
3
{"STATUT":"PASS",
"Liste":{
  "0":{"PO_Number":"000011317359","Error_Message":"Le nÂ° de timbre dans SAP n\u0027est pas valide !Erreur DATA SAP","Error_Date":"31/03/2017 12:58:39","Update_Date":"31/03/2017 13:10:30"},"1":{"PO_Number":"000011317360","Error_Message":"Cette rÃ©fÃ©rence n\u0027existe pas dans la table de correspondance !SAP error","Error_Date":"31/03/2017 12:58:39","Update_Date":"31/03/2017 13:10:30"},"2":{"PO_Number":"000011389087","Error_Message":"Erreur OLS Dienumber, pas de Retour OK du WebService NÂ° : 0000859851ND90770     {\"machineStatuses\":[{\"meterSerialNo\":\"0000859851ND90770\",\"status\":\"no system linked to device [0000859851ND90770] and Opco [3]\"}]}","Error_Date":"31/03/2017 12:58:39","Update_Date":"31/03/2017 13:10:30"}}}

Store

Code:

1
2
3
4
5
6
7
8
9
10
11
var ListeErrorJsonPStore = new Ext.data.Store({
                                            autoLoad: true,
                                            storeId: 'MyStore',
                                            //model: 'ListeErrorJsonModel',
                                            //fields: ['Key','Value'],
                                            fields: ['PO_Number','Error_Type','Error_Date','Update_Date'],
                                            remoteSort : true,
                                            pageSize : 100,
                                            autoLoad : false,
                                            data:response.Liste[0].PO_Number,
                                            });

model

Code:

1
2
3
4
5
6
7
8
9
10
Ext.define("ListeErrorJsonModel", {
                                                extend: "Ext.data.Model",
                                                fields: [
                                                    {name:"PO_Number", type:"string"},
                                                    {name:"Error_Type",type:"string"},
                                                    {name:"Error_Date", type:"string"},
                                                    {name:"Update_Date",type:"string"},
                                                ]
 
                                            });

grid panel

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
{
                                                                xtype: 'grid',
                                                                store: ListeErrorJsonPStore,
                                                                id:'gridListeErreur',
                                                                headerBorders: false,
                                                                loadMask: true,
                                                                height: '100%',
                                                                width : '98%',
                                                                multiColumnSort: true,
                                                                syncRowHeight: true,
                                                                columns: [{
                                                                    text: 'OF',
                                                                    width: '10%',
                                                                    dataIndex: 'PO_Number'
                                                                }, 
                                                                {   text: 'Message Erreur',
                                                                    width: '40%',
                                                                    dataIndex: 'Error_Message'
                                                                },
                                                                {   text: 'Date Erreur',
                                                                    width: '39%',
                                                                    dataIndex: 'Error_Date'
                                                                }, 
                                                                {   text: 'Date Update',
                                                                    width: '10%',
                                                                    dataIndex: 'Update_Date'
                                                                }
                                                                ]
 
 
 
 
 
                                                            }

Merci à vous

j'arrive à afficher une ligne correspondant a un indice :

Code:

1
2
3
4
5
6
7
8
9
10
11
var ListeErrorJsonPStore = new Ext.data.Store({
                                            autoLoad: true,
                                            storeId: 'MyStoreListeErreurs',
                                            root: 'Liste',
                                            model: 'ListeErrorJsonModel',
                                            fields: ['PO_Number]','Error_Type','Error_Date','Update_Date'],
                                            remoteSort : true,
                                            pageSize : 100,
                                            autoLoad : true,
                                            data:response.Liste[0],
                                           });

avec cette ligne : data:response.Liste[0], j'affiche ma ligne mais par contre comment afficher l'ensemble des lignes?

Merci @ vous

03/05/2017, 12h38
souhail72

Résolue

Vue que la structure de mon json etait fait d'objet ca cahnge la donne.
ca marche est la commande pour le data dans le grid est :

Code:

Object.values(response.Liste)

response est mon retour Json et Liste est le root de ma chaine Json
Merci @ vous