Problem with EXTJS 4 Grid - asp.net

Question

I am trying to load a JSON string into an EXTJS grid. The error i am getting is Uncaught TypeError: Cannot read property 'prototype' of undefined from ext-all-debug.js.
Here is my code for the js file.
$(document).ready(function () {
var store = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: 'http://localhost:3197/Home/GetSecondaryOfferings'
}),
reader: new Ext.data.JsonReader(
{
root: 'items',
totalProperty: 'totalCount',
id: 'id',
fields: [{name:'CUSIP', mapping: 'CUSIP'},'DESCRIPTION','COUPONRATE','ASKPRICE']
})
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP'},
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid2',
width: 1000,
autoHeight: true,
title: 'Employees'
});
});
Here is a sample of the JSON file that is returned, it does get returned....
{"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}],"totalCount":3316}
For good measure, here is the .cshtml file. I am using ASP MVC.
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p></p>
#section JavaScript
{
<link href ="#Url.Content("~/Content/resources/css/ext-all.css")" rel="Stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/resources/css/ext-all.css") />
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/examples/shared/example.css") />
<script type="text/javascript" src=#Url.Content("~/Content/bootstrap.js")></script>
<script type="text/javascript" src=#Url.Content("~/Content/examples/grid/FIO8472-JSON.js")></script>
}
<div id="example-grid"></div>
<div id="example-grid2"></div>
Any Help is appreciated.

Answer 1

You are launching the javascript code using jQuery. ExtJS has its own code launcher. Your code needs to be within onReady() method.
Example:
Ext.onReady(function() {
var store = new Ext.data.Store(
.
.
. // rest of your code
});
Since you are using ExtJs4, try the new MVC application architecture as well.

Answer 2

your store need a model
like this :
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
look a this exemple of the New store définition in extjs 4 '( from simple app example)
and try use MVC application architecture
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
hope that help