filling Grid panel from Store doesn't work EXTJS 4.2

Question

Good Morning, I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.

// Create store

var myStore = new Ext.data.JsonStore({
    proxy: new Ext.data.HttpProxy({
        url: 'Service.asmx/GetPeople',
        headers: {
            'Content-type': 'application/json' 
        }
    }),
    root: 'd', 
    id: 'Id', 
    fields: ['Id', 'FistName', 'LastName', 'BirthDate'], 
    autoLoad: true
});

//Create grid to display data from store

var gridTest = new Ext.grid.Panel({
     store: myStore, // Our store
     renderTo: Ext.getBody(),
     forceFit: true,
     columns: [ // Grid columns
         { xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
         { xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }    
     ]
});

and this is my viewport:

Ext.create('Ext.container.Viewport', {
    layout: "border",
    items: [{
        region: "north",
        height: 50,
        title: "Nord"
    }, {
        region: "south",
        height: 200,
        title: "sud",
        bodyStyle: 'background: #fffff;',
        border: false
    }, {
        region: "center",
        title: "centre",
        bodyStyle: 'background: #00000;',
        border: false,
        items: gridTest                                     
    }, {
        region: "west",
        width: 100,
        title: "ouest"
    }, {
        region: "east",
        width: 100,
        title: "est"
    }]
});

and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:

{"d": [{
    "__type":"WebService4ExtJS.Model.Person", 
    "Id":0,
     "FirstName":"sami", 
     "LastName":"[email protected]",
     "BirthDate":"23188219"
  }, {
     "__type":"WebService4ExtJS.Model.Person",
     "Id":1,"FirstName":"admin",
     "LastName":"[email protected]",
     "BirthDate":"1111111"
  }, {
     "__type":"WebService4ExtJS.Model.Person",
     "Id":2,
     "FirstName":"user",
     "LastName":"[email protected]",
     "BirthDate":"2222222"
  }]
 }

where did you get your proxy config from? look at the docs for examples. — dbrin
i tried to execute those script with EXTJS version 2.2, but when i change to a new version i found a problem, I can not advance using a newer version of ExtJS 4.2, thx for all help — samy bizani
API has changed quite a bit, you will have to change your code to adapt. Look at examples for the correct way to do what you are doing. — dbrin

Darin Kolev Darin Kolev · Accepted Answer · 2013-05-10T20:41:18

Your Store reader is not defined:

reader: {
    type: 'json',
    root: 'd',
    idProperty: 'Id'
}

You can find the working code here.

And one little mistake: in the fields array, you wrote FistName instead of FirstName.

filling Grid panel from Store doesn't work EXTJS 4.2

1 Answers