Question

我正在尝试将JSON字符串加载到EXTJS网格中。我得到的错误是来自ext-all-debug.js的Uncaught TypeError: Cannot read property 'prototype' of undefined。

这是我的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

您正在使用jQuery启动javascript代码。 ExtJS有自己的代码启动器。您的代码必须在onReady()方法内。

示例：

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

由于您使用的是ExtJs4，请尝试新的MVC application architecture。

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

希望得到帮助

EXTJS 4网格问题

2 个答案: