DataModel pour le tableau d'objets

Question

J'ai besoin d'aide pour créer une grille en utilisant Ext. Voici le code que je utilise:

Comme source de données que j'ai un tableau qui ressemble à ceci:

var listaEventos = [ 
    {"nu_evento":"1","dt_solicitacao":"2013-01-04 14:29:26","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"2","dt_solicitacao":"2013-01-04 14:54:29","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"3","dt_solicitacao":"2013-01-04 14:55:35","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"4","dt_solicitacao":"2013-01-04 15:04:47","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"5","dt_solicitacao":"2013-01-04 15:07:24","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"6","dt_solicitacao":"2013-01-04 15:08:07","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"}, 
    {"nu_evento":"7","dt_solicitacao":"2013-01-04 15:17:27","no_evento":"nome do evento","empregado_responsavel":"nome do responsavel","contato":"contato unidade"} 
]; 

Ce tableau est interrogé à partir d'un SGBD en utilisant PHP et PHP stocke le tableau dans le document HTML en utilisant json, mon code js obtient le tableau et crée une grille ext pour l'imprimer, avec tri et trucs. Le problème est que je n'arrive pas à faire comprendre à Ext que chaque élément du tableau est la ligne d'une grille, et que chaque champ d'objet représente les colonnes de la grille.

Pour que j'utilise ce modèle de données:

Ext.define('eventosDataModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'nu_evento', type: 'string'}, 
     {name: 'dt_solicitacao', type: 'date', dateFormat: "Y-m-d H:i:s"}, 
     {name: 'no_evento', type: 'string'}, 
     {name: 'empregado_responsavel', type: 'string'}, 
     {name: 'contato', type: 'string'} 
    ], 
    idProperty: 'eventos' 
}); 

ce magasin:

var store = Ext.create('Ext.data.ArrayStore', { 
    model: 'eventosDataModel', 
    data: listaEventos 
}); 

Enfin, je crée la grille:

var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    collapsible: false, 
    multiSelect: true, 
    stateId: 'stateGrid', 
    columns: columnsStructure, 
    height: 350, 
    width: 1200, 
    title: 'Eventos Existentes', 
    renderTo: 'eventos-extgrid', 
    viewConfig: { 
     stripeRows: true, 
     enableTextSelection: true 
    } 
}); 

colonnes I spécifiées dans une séparée variable:

var columnsStructure = [ 
     { 
      text  : '#', 
      width  : 50, 
      sortable : true, 
      dataIndex: 'nu_evento' 
     }, 
     { 
      text  : 'Nome do Evento', 
      width : 300, 
      sortable : true, 
      dataIndex: 'no_evento' 
     }, 
     { 
      text  : 'Data da Solicitação', 
      width : 200, 
      sortable : true, 
      renderer : Ext.util.Format.dateRenderer('d/m/Y H:i:s'), 
      dataIndex: 'dt_solicitacao' 
     }, 
     { 
      text  : 'Empregado Responsável', 
      width : 300, 
      sortable : true, 
      dataIndex: 'empregado_responsavel' 
     }, 
     { 
      text  : 'Contato', 
      width : 345, 
      sortable : false, 
      dataIndex: 'contato' 
     } 
    ]; 

Il crée correctement la grille, crée ses colonnes et crée même autant de lignes que la quantité d'éléments du tableau. Mais toutes les cellules sont vides!

j'ai réussi à le faire fonctionner la conversion de chaque objet dans un tableau:

var listaEventos = [ 
    ["1","2013-01-04 14:29:26","nome do evento","user name","contato unidade"], 
    ["2","2013-01-04 14:54:29","nome do evento","user name","contato unidade"], 
    ["3","2013-01-04 14:55:35","nome do evento","user name","contato unidade"], 
    ["4","2013-01-04 15:04:47","nome do evento","user name","contato unidade"], 
    ["5","2013-01-04 15:07:24","nome do evento","user name","contato unidade"], 
    ["6","2013-01-04 15:08:07","nome do evento","user name","contato unidade"], 
    ["7","2013-01-04 15:17:27","nome do evento","user name","contato unidade"] 
]; 

Sans toucher un mot sur le code JS, si je nourris avec ce tableau, toutes les données sont affichées sur la grille!

Cela fonctionne bien pour moi maintenant, mais sa maintenabilité est très mauvaise. Tout ce qui relie la grille de DAO à Ext de PHP est l'ordre dans lequel les éléments sont ajoutés au tableau sur PHP et listés sur JS. Bien sûr, je peux faire un gros commentaire sur chaque fichier expliquant l'importance de l'ordre, mais ce serait bien mieux si une clé de tableau PHP se rapporterait à un nom d'objet JS, et Ext le comprendrait et lierait par nom et non par simple ordre .

Existe-t-il un moyen de réaliser ce type de liaison?

Answer 1

Vous devez utiliser idProperty correct (vous utilisez idProperty: 'eventos'), je ne vois pas eventos dans votre tableau de données. Dans votre cas, il devrait être idProperty: 'nu_evento' je suppose.