extJS - Can not get data to render in GridPanel

Question

The below code uses Ext.data.Store to retrieve a JSON with table metadata (for the column headings) and the table's data. The backend PHP script is working correctly and the Ext.data.Store contains valid records for the data - I just can't get them to go "into" the Grid itself.

The API Documentation makes it seem as if I just define a store property for Ext.grid.GridPanel and it will handle the rest.

Note: The code below is a separate from the rest of the application. We have pulled this portion out to see if we can just get a grid working, without the influence of the rest of the 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();
         }
        }
       }); 
      }
     }
    }); 
});

As I review the applicationStore and queryStore objects in Firebug I can see the expected data results perfectly in applicationStore.data.items.#.json and queryStore.data.items.#.json (of course, replacing # with the record number).

Any ideas?

Answer 1

Wow - this has been giving us trouble for three days. Turns out I was making an array within an array at var queryFields = Ext.data.Record.create([fields]);

Changing that to: var queryFields = Ext.data.Record.create(fields); fixed the issue.