DataModel for array of objects

Question

I'm needing some help on creating a grid using Ext. Here's the code I'm using:

As datasource I have an array that looks like this:

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"}
];

This array is being queried from a DBMS using PHP, and PHP is storing the array in HTML document using json, then my js code gets the array and creates an Ext grid to print it, with sorting and stuff. The problem is that I can't get Ext to understand that each array element is a grid's row, and each object field represents the grid's columns.

For that I use this data model:

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'
});

and this Store:

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

Finally, I create the grid:

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
    }
});

Columns I specified in a separated 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'
        }
    ];

It creates the grid properly, makes its columns, and even creates as many rows as the amount of array's itens. But all cells are blank!

I managed to make it work converting each object into an array:

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"]
];

Without touching a word on the JS code, if I feed it with this array, all data is shown on the grid!

That works fine for me now, but it's maintainability is very bad. All that links PHP's DAO to Ext's grid is the order that elements are added to array on PHP and listed on JS. Of course I can make a big comment on each file explaining the order importance, but it'd be much better if a PHP array key would relate to a JS object name, and Ext would understand it and bind by name and not by simple order.

Is there a way to make this kind of binding?

Answer 1

You should use correct idProperty (you are using idProperty: 'eventos'), I don't see eventos in your data array. In your case it should be idProperty: 'nu_evento' I guess.