Проблема с EXTJS 4 Grid

Question

Я пытаюсь загрузить строку JSON в сетку EXTJS. Я получаю ошибку Uncaught TypeError: Cannot read property 'prototype' of undefined из ext-all-debug.js.

Вот мой код для файла js.

$(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'
  });   
});

Вот пример возвращаемого файла JSON, он возвращается ....

{"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":"  5.650","ASKPRICE":"    104.450"}],"totalCount":3316}

Для примера, вот файл .cshtml. Я использую 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> 

Любая помощь приветствуется.

Answer 1

Вы запускаете код JavaScript с помощью jQuery. ExtJS имеет свой собственный модуль запуска кода. Ваш код должен быть в методе onReady().

Пример:

Ext.onReady(function() {
    var store = new Ext.data.Store(
    .
    .
    . // rest of your code
}); 

Поскольку вы используете ExtJs4, попробуйте новую архитектуру приложения MVC .

Answer 2

вашему магазину нужна модель
, например:

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});

посмотрите этот пример определения нового магазина в extjs 4 '(из простого примера приложения) и попробуйте использовать архитектуру приложения MVC

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'
        }
    }
});

надеюсь, что помощь