EXTJS 4：无法从json文件加载数据

Question

I am trying to load data from json file in my application but no data loaded, I am stuck with it:

(model)Singers.js:

Ext.define('SGM.model.Singers', {
extend: 'Ext.data.Model',
fields: ['id', 'ten_that', 'nghe_danh', 'ngay_sinh', 'tieu_su', 'anh_dai_dien', 'luot_like'],
idProperty: 'id',
proxy: {
    type: 'ajax',
    url: 'data/singers.json',
    reader: {
        type: 'json',
        root: 'data',
        successProperty: 'success'
    }
}

});

(store)Singers.js

Ext.define('SGM.store.Singers', {
extend: 'Ext.data.Store',
model: 'SGM.model.Singers',
/*data:[
    {   id: 1,
        ten_that: "Bui Anh Tuan",
        nghe_danh: "Bui Anh Tuan",
        ngay_sinh:"20/9/1992",
        tieu_su: "Tieu su cua Bui Anh Tuan",
        anh_dai_dien:"buianhtuan.jpg",
        luot_like:100}, 
    {
        id: 2, 
        ten_that: "Cao Mi Kim", 
        nghe_danh: "Cao Mi Kim", 
        ngay_sinh:"20/9/1992", 
        tieu_su: "Tieu su cua Cao Mi Kim", 
        anh_dai_dien:"caomikim.jpg", 
        luot_like:100}, 
    {
        id: 3,
        ten_that: "Pham Khanh Phuong", 
        nghe_danh: "Khanh Phuong", 
        ngay_sinh:"20/9/1992", 
        tieu_su: "Tieu su cua Khanh Phuong", 
        anh_dai_dien:"khanhphuong.jpg", 
        luot_like:100}, 
    {
        id: 4, 
        ten_that: "Ho Quang Hieu", 
        nghe_danh: "Ho Quang Hieu", 
        ngay_sinh:"20/9/1992", 
        tieu_su: "Tieu su cua Ho Quang Hieu", 
        anh_dai_dien:"hoquanhieu.jpg", 
        luot_like:100}
],*/

});

The inline data above work well but when I create a separated json file: singers.js (in folder 'data') with the following code:

{
"success": true,    
"results": [
    {   "id": 1,
        "ten_that": "Bui Anh Tuan",
        "nghe_danh": "Bui Anh Tuan",
        "ngay_sinh":"20/9/1992",
        "tieu_su": "Tieu su cua Bui Anh Tuan",
        "anh_dai_dien": "buianhtuan.jpg",
        "luot_like": 100}, 
    {
        "id": 2, 
        "ten_that": "Cao Mi Kim", 
        "nghe_danh": "Cao Mi Kim", 
        "ngay_sinh": "20/9/1992", 
        "tieu_su": "Tieu su cua Cao Mi Kim", 
        "anh_dai_dien": "caomikim.jpg", 
        "luot_like":100}, 
    {
        "id": 3,
        "ten_that": "Pham Khanh Phuong", 
        "nghe_danh": "Khanh Phuong", 
        "ngay_sinh": "20/9/1992", 
        "tieu_su": "Tieu su cua Khanh Phuong", 
        "anh_dai_dien": "khanhphuong.jpg", 
        "luot_like": 100}, 
    {
        "id": 4, 
        "ten_that": "Ho Quang Hieu", 
        "nghe_danh": "Ho Quang Hieu", 
        "ngay_sinh": "20/9/1992", 
        "tieu_su": "Tieu su cua Ho Quang Hieu", 
        "anh_dai_dien": "hoquanhieu.jpg", 
        "luot_like": 100}
]

}

And this is my folder directory:

+app
++controller
++model
+++Singers.js
++store
+++Singers.js
+view
+data
++singers.json
+app.js

-index.html.js

Thank in advanced!

Answer 1

The error lies in the root property of your proxy/reader configuration. Here, you specify the value "data" as the root object, in your JSON file however, the objects are stored in the "results" property.

Try the following model definition (mind the value of root ):

Ext.define('SGM.model.Singers', {
  extend: 'Ext.data.Model',
  fields: ['id', 'ten_that', 'nghe_danh', 'ngay_sinh', 'tieu_su', 'anh_dai_dien', 'luot_like'],
  idProperty: 'id',
  proxy: {
    type: 'ajax',
    url: 'data/singers.json',
    reader: {
      type: 'json',
      root: 'results',
      successProperty: 'success'
    }
  }
});