how to bind json for extjs grid - extjs

Question

I have a simple data in mysql and want to populate that data in a ExtJS grid
My code
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({
url: 'connectextjs.php'
});
var reader = new Ext.data.JsonReader([{
name: 'Employee_ID',
mapping: 'Employee_ID'
}, {
name: 'Department_ID'
}, {
name: 'Name'
}, {
name: 'Email'
}])
var store = new Ext.data.Store({
proxy: proxy,
reader: reader
});
store.load();
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
header: "Employee_ID",
width: 90,
dataIndex: 'Employee_ID',
sortable: true
}, {
header: "Department_ID",
width: 90,
dataIndex: 'Department_ID',
sortable: true
}, {
header: "Name",
width: 90,
dataIndex: 'Name',
sortable: true
}, {
header: "Email",
width: 200,
dataIndex: 'Email',
sortable: true
}],
renderTo: 'example-grid',
width: 540,
height: 200
});
});
My problem is I can't load the data on the grid. Please help me I am new to ExtJS.

Answer 1

connectextjs.php should return the json formated data with Employee_ID,Deaprtment_ID ,Name and Email init. Namming Convention should be followed strictly.

Answer 2

You can set the data of the grid by using this method.
First, assign an id to your grid, like this:
itemId : 'myGrid';
Get the JSON loaded from your JSON call, like this:
Ext.Ajax.request({
url : 'connectextjs.php',
params : {
yourParam : 'yourParameters'
},
// --> success simply means your action has no errors
success : function (conn, response, options, eOpts){
var jsonResults = Ext.JSON.decode(conn.responseText);
// --> Now that you have your JsonResults Its time to set it to your grid
me.getView().down('#myGrid').setStore(jsonResults);
}
});