EXTJS 4 网格的问题

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