IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

Json et Tableau Grid


Sujet :

Ext JS / Sencha

  1. #1
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut Json et Tableau Grid
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Futur Membre du Club
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Octobre 2004
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2004
    Messages : 7
    Points : 9
    Points
    9
    Par défaut
    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.

  3. #3
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut Merci
    Bonjour du retards
    En effet le data que je récupère sont mis dans une cellule.
    Merci @ vous
    Images attachées Images attachées  

  4. #4
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    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

  5. #5
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut Merci
    Merci,
    J'ai déja essayé avec le JSON mais ca ne marche pas...

  6. #6
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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 : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  7. #7
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut merci
    désolé sekaijin ...
    Merci pour ton aide super gentil

  8. #8
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut Hic
    Au fait la sortie JSON correspond a un Key et value de ce type

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ([{"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

  9. #9
    Expert éminent
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 60
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Points : 9 127
    Points
    9 127
    Par défaut
    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

  10. #10
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    {
    header : 'Partnumber',
    align: 'left',
    width : '15%',
    id:'partNumber',
    dataIndex: 'Value',
    renderer:PartNumberRender
    },
    Merci du soutien

  11. #11
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    {
                                                                    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

  12. #12
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut
    j'arrive à afficher une ligne correspondant a un indice :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  13. #13
    Membre du Club
    Homme Profil pro
    PartNumber
    Inscrit en
    Octobre 2012
    Messages
    304
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : PartNumber
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Octobre 2012
    Messages : 304
    Points : 64
    Points
    64
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    Object.values(response.Liste)
    response est mon retour Json et Liste est le root de ma chaine Json
    Merci @ vous

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Extjs.util.JSON et tableau Associatif
    Par Tiolebucheron dans le forum Ext JS / Sencha
    Réponses: 4
    Dernier message: 18/07/2011, 18h31
  2. Json et tableau associatifs
    Par Finality dans le forum Général JavaScript
    Réponses: 14
    Dernier message: 07/03/2010, 18h19
  3. tableau(grid) graphique de liste en java
    Par zanoubya dans le forum Composants
    Réponses: 13
    Dernier message: 22/04/2009, 17h11
  4. GWT - Json et Bdd + grid
    Par erox44 dans le forum GWT et Vaadin
    Réponses: 4
    Dernier message: 20/03/2009, 11h48

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo