Pourquoi mon datagrid ExtJS est-il vide?

Question

J'essaie de faire une preuve de concept ExtJS DataGrid en route vers un magasin basé sur le serveur. À l'heure actuelle mon code est le suivant:

var arrayData = [ 
    ['', 'Held', '', '', 'abc', '', '100.00', '0.00', 'Internal Approval'], 
    /* 11 similar rows deleted for sanitization's sake */ 
    /* I've tried with and without quotes around the monetary amounts. */ 
    ]; 

var nameRecord = Ext.data.Record.create([ 
    {name: 'approved_date', mapping: 1}, 
    {name: 'approval_status', mapping: 2}, 
    {name: 'approval_id', mapping: 3}, 
    {name: 'reference_id', mapping: 4}, 
    {name: 'manufacturer_distributor_name', mapping: 5}, 
    {name: 'shipping_authorization_number', mapping: 6}, 
    {name: 'purchase_order_number', mapping: 7}, 
    {name: 'original_amount', mapping: 8}, 
    {name: 'open_amount', mapping: 9}, 
    {name: 'requestor', mapping: 10} 
    ]); 

var arrayReader = new Ext.data.ArrayReader({}, nameRecord); 

var memoryProxy = new Ext.data.MemoryProxy(arrayData); 

var store = new Ext.data.Store({ 
    reader: arrayReader, 
    proxy: memoryProxy 
    }); 

var columnModel = new Ext.grid.ColumnModel([ 
    { 
    header: 'Approved Date', 
    sortable: true, 

    dataIndex: 'approved_date' 
    }, 
    { 
    header: 'Approval Status', 
    sortable: true, 
    dataIndex: 'approval_status' 
    }, 
    { 
    header: 'Approval ID', 
    sortable: true, 
    dataIndex: 'approval_id' 
    }, 
    { 
    header: 'Reference ID', 
    sortable: true, 
    dataIndex: 'reference_id' 
    }, 
    { 
    header: 'Manufacturer/Distributor Name', 
    sortable: true, 
    dataIndex: 'manufacturer_distributor_name' 
    }, 
    { 
    header: 'Shipping Authorization Number', 
    sortable: true, 
    dataIndex: 'shipping_authorization_number' 
    }, 
    { 
    header: 'Purchase Order Number', 
    sortable: true, 
    dataIndex: 'purchase_order_number' 
    }, 
    { 
    header: 'Original Amount', 
    sortable: true, 
    dataIndex: 'original_amount' 
    }, 
    { 
    header: 'Open Amount', 
    sortable: true, 
    dataIndex: 'open_amount', 
    }, 
    { 
    header: 'Requestor', 
    sortable: true, 
    dataIndex: 'requestor' 
    }]); 

var gridView = new Ext.grid.GridView(); 

var selectionModel = new Ext.grid.RowSelectionModel({ 
    singleSelect: true 
    }); 

var grid = new Ext.grid.GridPanel({ 
    title: 'Approvals', 
    renderTo: Ext.getBody(), 
    height: 500, 
    width: 700, 
    store: store, 
    view: gridView, 
    colModel: columnModel, 
    selModel: selectionModel 
    }); 

Ceci est destiné à suivre de près le « Bonjour tout le monde » exemple de grille pp 159-161 -level en Jésus Garcia ExtJS en action.. En l'état, mon code remplit les noms de colonnes avec une zone blanche vide; c'est-à-dire, il affiche les noms de colonne et une zone blanche vide sur FF/Chrome, et ne semble pas afficher quoi que ce soit sur IE6-8. Dans Chrome, la console JavaScript n'affiche aucun message d'erreur ni aucune autre information enregistrée.

Des suggestions sur ce qui ne va pas avec mon code ou comment je peux le réparer?

Answer 1

IE-6-8 ne peuvent pas être aimer la virgule ballants à dataIndex: 'open_amount', (et toute autre erreur de syntaxe FF/Chrome pardonnerait)

Pouvez-vous poster une capture d'écran de ce que vous voyez dans FF/Chrome?

Votre code peut être simplifié un peu. par exemple. Il suffit d'utiliser ArrayStore au lieu de lecteur, proxy, record, combinaison magasin

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