jsonGrid簡單例子

ps: 在我本身寫的例子中，代碼徹底正確，卻調不出結果。後來發現，原來是返回的json串太大太長。

本例子要實現的是一個比較簡單的以json格式爲數據源的extjs grid例子。

//首先，定義好proxy，鏈接好遠端數據源。

var proxy=new Ext.data.HttpProxy({url:'survey.html'});

//定義record
 var record=new Ext.data.Record.create([
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
   ]);

 

//定義reader
 var reader=new Ext.data.JsonReader({},record);

//構建Store  
 //配置proxy，reader此兩屬性便可
  var store=new Ext.data.Store({
    proxy:proxy,
    reader:reader,
    autoLoad:true
    });

//載入
 //或者配置一下上面的autoLoad屬性
 //store.load();

 

   // create the grid
    var grid = new Ext.grid.GridPanel({
  title:"一個json 網格例子",
  frame:true,
        store: store,
        columns: [
            {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
            {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
            {header: "location", width: 60, dataIndex: 'location', sortable: true},
            {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
            {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
            {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
        ],
        renderTo:Ext.getBody(),
        width:540,
        height:200
    });

 

本例數據源'survey.html'，以下所示

[
 {
  "appeId":"1",
  "survId":"1",
  "location":"",
  "surveyDate":"2008-03-14",
  "surveyTime":"12:19:47",
  "inputUserId":"1",
  "inputTime":"2008-03-14 12:21:51",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"2",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-14",
  "surveyTime":"22:43:09",
  "inputUserId":"32",
  "inputTime":"2008-03-14 22:43:37",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"3",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-15",
  "surveyTime":"07:59:33",
  "inputUserId":"32",
  "inputTime":"2008-03-15 08:00:44",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"4",
  "survId":"1",
  "location":"",
  "surveyDate":"2008-03-15",
  "surveyTime":"10:45:42",
  "inputUserId":"1",
  "inputTime":"2008-03-15 10:46:04",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"5",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-16",
  "surveyTime":"08:04:49",
  "inputUserId":"32",
  "inputTime":"2008-03-16 08:05:26",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"6",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-20",
  "surveyTime":"20:19:01",
  "inputUserId":"32",
  "inputTime":"2008-03-20 20:19:32",
  "modifyTime":"0000-00-00 00:00:00"
 }]

 

效果以下：

 

歸納起來，步驟以下：

一、定義好一個proxy

二、定義好record

三、定義好reader，本例用到的是JsonReader，把上面定義的record做爲其構造函數的參數之一

四、構建Store， 剛纔構造好的proxy，reader均做爲store的構造函數配置項之一

五、構造grid，關鍵配置好store屬性和columns屬性。