extJS - Impossible d'obtenir les données à afficher dans GridPanel

Question

Le code ci-dessous utilise Ext.data.Store pour récupérer un fichier JSON avec des métadonnées de table (pour les en-têtes de colonne) et les données de la table. Le script PHP backend fonctionne correctement et le Ext.data.Store contient des enregistrements valides pour les données - je n'arrive pas à les faire "entrer" dans "la grille elle-même.

La documentation de l'API donne l'impression que je viens de définir une propriété store pour Ext.grid.GridPanel et qu'elle s'occupera du reste.

Remarque: Le code ci-dessous est différent du reste de l'application. Nous avons retiré cette partie pour voir si nous pouvions simplement faire fonctionner une grille, sans l'influence du reste de l'application.

Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif'; 
Ext.onReady(function() { 
    var columns = []; 
    var fields = []; 


    var tabPanel = new Ext.TabPanel({ 
     renderTo: Ext.getBody(), 
     activeTab: 0, 
     height: 700 
    }); 

    var queryHeaders = Ext.data.Record.create([ 
     {name: 'id'}, 
     {name: 'table'}, 
     {name: 'field'}, 
     {name: 'title'} 
    ]); 

    var applicationStore = new Ext.data.Store({ 
     autoLoad: true, 
     reader: new Ext.data.JsonReader({root: 'fields'}, queryHeaders), 
     url: 'http://localhost/aargh/index.php/applications/hardware', 
     listeners: { 
      'load': function() { 
       console.info(applicationStore); 
       applicationStore.each(function(r) { 
        this_column = []; 
        this_column['header'] = r.data['title']; 
        this_column['dataIndex'] = r.data['id']; 
        columns.push(this_column); 
        this_column = [] 
        this_column['name'] = r.data['id']; 
        fields.push(this_column); 
       }); 

       console.info(fields); 
       var queryFields = Ext.data.Record.create([fields]); 

       var queryStore = new Ext.data.Store({ 
        autoLoad: true, 
        reader: new Ext.data.JsonReader({root: 'fields'}, queryFields), 
        url: 'http://localhost/aargh/index.php/query/execute/applications/hardware', 
        listeners: { 
         'load': function() { 
          console.info(queryStore); 
          tabPanel.add(new Ext.grid.GridPanel({ 
           title: 'Hardware', 
           store: queryStore, 
           columns: columns, 
           autoHeight: true, 
           frame: true 
          })); 
          tabPanel.doLayout(); 
         } 
        } 
       }); 
      } 
     } 
    }); 
}); 

Comme je passe en revue les applicationStore et queryStore objets dans Firebug je peux voir les résultats attendus de données parfaitement applicationStore.data.items.#.json et queryStore.data.items.#.json (bien sûr, en remplaçant # par le numéro d'enregistrement).

Des idées?

Answer 1

Wow - cela nous a causé des problèmes pendant trois jours. Il s'avère que je faisais un tableau dans un tableau à var queryFields = Ext.data.Record.create([fields]);

Changer cela pour: var queryFields = Ext.data.Record.create(fields); résolu le problème.