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调用中可以识别的数据总数。
希望对您有所帮助。搞了半天才搞定哈哈哈
嗨,我是 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调用中可以识别的数据总数。
希望对您有所帮助。搞了半天才搞定哈哈哈