Why Is My ExtJS Datagrid Populating As Empty?

I am trying to make a proof of concept ExtJS datagrid en route to moving to a server-based store. At present my code is as follows: var arrayData = [ ['', 'Held', '', '', 'abc',

Solution 1:

IE-6-8 may not be liking the dangling comma at dataIndex: 'open_amount', (and any other syntax errors that FF/Chrome would forgive)

Can you post a screenshot of what you are seeing in FF/Chrome?

Your code can be simplified quite a bit. e.g. Simply use ArrayStore instead of reader,proxy,record,store combination

EDIT-

var grid = new Ext.grid.GridPanel({
    title: 'Approvals',
    renderTo: Ext.getBody(),
    height: 500,
    width: 700,
    store: new Ext.data.ArrayStore({
      idIndex:0,
      fields: ['approved_date', 'approval_status',{name:'approval_id', type:'int'}] //specify other fields here
    }),
    cm:new Ext.grid.ColumnModel({
      defaults:{
        sortable:true,
        width:200
      },
      columns:[{
       header:'Approval Date',
       dataIndex:'approved_date'
      },{
        header:'Approval Status',
        dataIndex:'approval_status'
      },{
        header:'Approval ID',
        dataIndex:'approval_id'
      }]                    
    })
});

var myData=[
  ['01/01/11','Held', 1],
  ['02/02/11','Approved', 2]
]

grid.getStore().loadData(myData);