ExtJs grid取到数据而不显示的解决（亲测）

本文内容使用ExtJs 4.0下亲测通过。刚开始通过网上找的很多方法都不靠谱。

1: var store = new Ext.data.JsonStore({

2: url: 'gridData.php',

3: root: 'movies',

4: fields: ['film_id', 'title', 'release_year', 'rating']

5: });

6: var grid = new Ext.grid.GridPanel({

7:     title:'Movies',

8:     store: store,

9:     columns: [

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

11:                 { id: 'title-col', header: "Title",  180,dataIndex: 'title', sortable: true },

12:                 { header: "Rating",  75, dataIndex: 'rating',sortable: true },

13:                 { header: "Year",  75, dataIndex: 'release_year',sortable: true, align: 'center' }

14:         ],

15:     autoExpandColumn: 'title-col',

16:     renderTo: Ext.getBody(),

17:      600,

18:     height: 300,

19:     loadMask: true

20: });

21: store.load();

 

以上是javascript代码，json格式数据从服务器取得，在firefox+firebug中可以看到已经取得数据：

1: { "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" } ] }

运行代码后，发现已经显示grid，但是没有数据显示。修改成如下代码后正常显示：

1: var store = new Ext.data.JsonStore({

2:     proxy: {

3:         url: 'gridData.php',

4:         type: 'ajax',

5:         reader: {

6:             type: 'json',

7:             root: 'movies'

8:         }

9:     },

10:     fields: ['film_id', 'title', 'release_year', 'rating']

11: });