Sencha Ext JS 数据未显示在网格中

Sencha Ext JS data not showing in grid

嗨,我是 Sencha Extjs 的新手,我正在尝试从我在 asp.net 中创建的 API 中提取数据。

在开发人员工具中我可以获取数据,但它没有显示在网格中。有人可以帮忙吗?

这是我做的代码。

这是模型

Ext.define('VidlyViews.model.Customers', {
extend: 'VidlyViews.model.Base',

fields: [
    'name', 'membershipType', 'isSubscribeToNewsLetter', 'birthDate'
]

});

这是商店。

Ext.define('VidlyViews.store.Customers', {
extend: 'Ext.data.Store',
alias: 'store.customers',
model: 'VidlyViews.model.Customers',
autoLoad: true,

proxy: {
    type: 'jsonp',
    url: 'https://localhost:44300/api/customers',
    reader: {
        type: 'json',
        rootProperty: 'feed.entry'
    }
}

});

这是在 classic/src/view/main 文件夹中

Ext.define('VidlyViews.view.main.Customers', {
extend: 'Ext.grid.Panel',
xtype: 'customerlist',

requires: [
    'VidlyViews.store.Customers'
],

title: 'Customers',

store: {
    type: 'customers'
},

columns: [
    { text: 'Customer Name',  dataIndex: 'name', flex: 1 },
    { text: 'Membership Type', dataIndex: 'membershipType', flex: 1 },
    { text: 'Newsletter', dataIndex: 'isSubscribeToNewsLetter', flex: 1 },
    { text: 'Birthdate', dataIndex: 'birthDate', flex: 1 }
],

listeners: {
    select: 'onItemSelected'
}

});

提前致谢

我解决了我的问题,希望它能在将来帮助其他人。

我将我的代理更改为:

proxy : {
    type : 'rest',
    actionMethods : {
       read : 'GET' 
    },
    url : 'https://localhost:44300/api/customers',
    useDefaultXhrHeader: false,
    reader: {
       type : 'json',
       headers: { 'Accept': 'application/json' },
       allDataOptions: {
            associated: true,
            persist: true
        },
       rootProperty : 'data'
    },
}

我用rest拉数据。 rootPropery 是数据。 在 API (ASP.NET) 中,我将 IhhtpActionResult 修改为

public IHttpActionResult GetCustomers(int start, int limit)

因为在煎茶中你可以获得分页的开始和限制,并在后端使用 .Skip() 和 .Take()。

看起来像这样:

var customerDtos = customersQuery
            .OrderBy(c => c.CustomerId)
            .Skip(start)
            .Take(limit)
            .ToList();

我做的最后一步是 return 这样的数据:

return Ok(new { total = customerDtos.Count(), data = customerDtos });

数据在rootProperty中被识别为数据集合,total是在API调用中可以识别的数据总数。

希望对您有所帮助。搞了半天才搞定哈哈哈