本文内容使用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: });