Sencha Ext JS data not showing in grid - extjs

Question

Hi im new to Sencha Extjs im trying to pull the data from the API that i created in asp.net.
in the developer tools i can get the data but it is not showing in the grid. Can anyone help?
here is the code that i did.
This is the Model
Ext.define('VidlyViews.model.Customers', {
extend: 'VidlyViews.model.Base',
fields: [
'name', 'membershipType', 'isSubscribeToNewsLetter', 'birthDate'
]
});
This is the Store.
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'
}
}
});
This is in the classic/src/view/main folder
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'
}
});
Thank you in advance

Answer 1

i fixed my problem and i hope it can help others in the future.
i changed my proxy to this:
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'
},
}
I used restto pull the data. and the rootPropery is the data.
In the API (ASP.NET) i modified the IhhtpActionResult to this
public IHttpActionResult GetCustomers(int start, int limit)
because in sencha you can get the start and limit of the pagination and use .Skip() and .Take() on the backend.
it looks like this:
var customerDtos = customersQuery
.OrderBy(c => c.CustomerId)
.Skip(start)
.Take(limit)
.ToList();
and the last step that i did is to return the data like this:
return Ok(new { total = customerDtos.Count(), data = customerDtos });
the data is recognized in the rootProperty as the collection of data and the total is the total count of the data that can be recognized in the API call.
I hope it helps. It took me a whole day to figure it out hahaha