ExtJS lỗi lưới, dữ liệu JSON không được hiển thị

Question

Tôi đã cấu hình cửa hàng của tôi như sau:

var store = new Ext.data.JsonStore({ 
url: 'gridData.php', 
root: 'movies', 
fields: ['film_id', 'title', 'release_year', 'rating'] 
}); 

và sau đó được xác định lưới của tôi là:

var grid = new Ext.grid.GridPanel({ 
    title:'Movies', 
    store: store, 
    columns: [ 
       { header: "ID", width: 30, dataIndex: 'film_id',sortable: true, hidden:true }, 
       { id: 'title-col', header: "Title", width: 180,dataIndex: 'title', sortable: true }, 
       { header: "Rating", width: 75, dataIndex: 'rating',sortable: true }, 
       { header: "Year", width: 75, dataIndex: 'release_year',sortable: true, align: 'center' } 
     ], 
    autoExpandColumn: 'title-col', 
    renderTo: Ext.getBody(), 
    width: 600, 
    height: 300, 
    loadMask: true 
}); 

Sau đó tôi tải các cửa hàng:

store.load(); 

Tôi đang làm tất cả điều này trong phương thức Ext.onReady. Dữ liệu mà tôi muốn hiển thị được tải xuống từ tệp php có dạng sau:

{ "count":2, "movies":[{ "film_id":"1", "title":"ACADEMY DINOSAUR", "description":"An Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies", "release_year":"2006", "rating":"PG", "special_features":"Deleted Scenes,Behind the Scenes" }, { "film_id":"2", "title":"ACE GOLDFINGER", "description":"An Astounding Epistle of a Database Administrator And an Explorer who must Find a Car in Ancient China", "release_year":"2006", "rating":"G", "special_features":"Trailers,Deleted Scenes" } ] } 

Khi trang được tải, lưới sẽ hiển thị mặt nạ tải và dữ liệu không bao giờ được hiển thị. Ngoài ra, tôi gặp lỗi a is undefined. Tôi đang thiếu gì?

Sửa

Tôi đã phát hiện ra rằng có một số vấn đề đường dẫn khi gán URL để lưu trữ nhưng vẫn không thể giải quyết. Tệp "gridData.php" của tôi, tệp JS và tệp HTML nơi lưới đang được hiển thị, nằm trong cùng một thư mục và tôi đang ở "localhost/myapp". Hãy giúp tôi!

Answer 1

Giả sử bạn đang chạy ExtJS 4 xác định cửa hàng của bạn như thế này:

var store = new Ext.data.JsonStore({ 
    proxy: { 
     url: 'gridData.php', 
     type: 'ajax', 
     reader: { 
      type: 'json', 
      root: 'movies' 
     } 
    }, 
    fields: ['film_id', 'title', 'release_year', 'rating'] 
}); 

Answer 2

thử với cửa hàng này:

var store = new Ext.data.JsonStore({ 
    url: 'gridData.php', 
    root: 'movies', 
    fields: [ 
       { 
        name: 'id' 
       }, 
       { 
        name: 'title' 
       }, 
       { 
        name: 'release_year' 
       }, 
       { 
        name: 'rating' 
       }      
    ] 
}); 

Answer 3

cửa hàng của bạn tuyên bố bản thân để có những lĩnh vực:

• id
• tiêu đề
• RELEASE_YEAR
• giá

Tuy nhiên, hàng dữ liệu JSON của bạn có chứa các lĩnh vực:

• film_id
• tiêu đề
• mô tả
• RELEASE_YEAR
• giá
• special_features

lỗi bạn rất có thể gây ra bởi lưới tìm kiếm một n 'id' trường không tồn tại trong dữ liệu.

Một lựa chọn là để thay đổi định nghĩa lĩnh vực của cửa hàng của bạn để:

['film_id', 'title', 'release_year', 'rating'] 

Bạn cũng sẽ cần phải thực hiện một sự thay đổi tương ứng với định nghĩa cột:

{header: "ID", width: 30, dataIndex: 'film_id', sortable: true, hidden: true} 

Một lựa chọn khác là thêm một ánh xạ đến định nghĩa của trường trong cửa hàng:

[{name: 'id', mapping: 'film_id'}, 'title', 'release_year', 'rating'] 

---

Ngoài ra, tôi đề nghị rằng trong khi phát triển bạn bao gồm ExtJS vào trang của bạn bằng cách sử dụng 'ext-all-debug.js' thay vì 'ext-all.js'. Các thông báo lỗi và backtraces trong giao diện điều khiển thường sẽ được mô tả nhiều hơn khi chạy chống lại xây dựng gỡ lỗi.

Answer 4

Nó phải là đơn giản. Giá trị mặc định của idProperty là id và bạn chưa đặt giá trị khác. Vì vậy, cửa hàng tìm kiếm một trường id không tồn tại.

nên hoạt động

var store = new Ext.data.JsonStore({ 
url: 'gridData.php', 
root: 'movies', 
idProperty: 'film_id', 
fields: ['film_id', 'title', 'release_year', 'rating'] 
});