Get JSON data from WebAPI & Load data into Store - json

Question

I am learning ExtJS-4.2, I was following their MVC tutorial...
I built my controller, view, model, store... My Store had hard-coded data. I have a working WebAPI for testing, which sends result in json format...
What the tutorial is talking about how to read from local file and send to an API,
what i want to read from API and load my data into the store...
Ext.define('AM.store.Productstore',
{
extend : 'Ext.data.Store',
model : 'AM.model.Productmodel',
autoload : true,
proxy : {
type : 'AJAX',
url : 'localhost/mfw/api/products/all'
//tutorial is no help any furthur from this point on
}
});
My URL is localhost/mfw/api/products/all
and my returning json is
[{"ID":1,"Name":"aa","Category":"A","Price":200.00},
{"ID":2,"Name":"bb","Category":"B","Price":200.00
{"ID":3,"Name":"cc","Category":"C","Price":200.00},
{"ID":4,"Name":"dd","Category":"D","Price":200.00},
{"ID":5,"Name":"ee","Category":"E","Price":200.00},
{"ID":6,"Name":"ee","Category":"F","Price":200.00}]
any help?

Answer 1

Please change your proxy type to 'rest' instead of 'Ajax'. More over mention your reader config. Did you map your json key with fields in model.
please refer sencha guide for more clarity.
http://docs.sencha.com/ext-js/4-2/#!/guide/data
Thanks

Answer 2

Here is a jsfiddle showing a grid with your data. One of the key things is the root property of the json reader. Since your data does not have a root you can leave the root property out and it should work. If you data is wrapped inside another field ie root field then specify root: 'myrootfield' in the reader. So here is your proxy. Also in your model specify the key field using idProperty in your case it is 'ID', I think extjs defaults to idProperty of 'id' lowercase so better to just specify it directly.
proxy : {
type : 'rest',
url : 'localhost/mfw/api/products/all'
reader: {
type: 'json'
}
}