How to bind grid dynamically in ext.net mvc? - asp.net-mvc

Question

I am very new in ext.net mvc. I have problem of binding grid in ext.net mvc.
My code as below. I checked service return json data. But not show any data in grid view. Any missing in my code.
How to bind json data in grid? Please advice me any other ways. I have not found many sample in online regarding ext.net mvc.
#{
ViewBag.Title = "A Task";
//Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: 'http://localhost:49813/Areas/ASample/WcfService/AService.svc/GetDatas',
root: 'GetDatas',
idProperty: 'Id',
fields: ['Id', 'Employee_Name'],
remoteSort: true,
autoLoad: true
});
var cm = new Ext.grid.ColumnModel({
columns: [
{ header: 'Id', dataIndex: 'Id', hidden: true },
{ header: 'Employee Name', dataIndex: 'Employee_Name', width: 100 }
],
defaults: {
sortable: true,
scope: this,
menuDisabled: true,
align: 'left'
}
});
alert(1);
var grid = new Ext.grid.GridPanel({
title: 'Employees',
store: store,
colModel: cm,
renderTo: Ext.get('divGrid'),
width: 500,
height: 350,
border: true,
loadMask: true
});
});
</script>
<h2>A Task</h2>

Answer 1

Loading the store is async, so who says if the store is loaded? Try listen to the store.load event and from there do a reconfigure on the grid.
You can also set autoLoad to false and manually load the store.