ExtJS的網格不會顯示任何數據

Question

我創建了下面的網格組件：

MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, { 
    autoHeight: true, 
    iconCls: 'icon-grid', 
    title: 'Relationship Members', 
    frame: true, 
    viewConfig: { forceFit: true }, 
    relationshipId: null, 
    documentId: null, 

    initComponent: function() { 
     if (this.verifyParameters()) { 
      // Initiate functionality 
      this.columns = this.buildColumns(); 
      this.view = this.buildView(); 
      this.store = this.buildStore(); 
      this.store.load(); 
     } 

     MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this); 
    }, 

    verifyParameters: function() { 
     // Verification code 
    }, 

    buildColumns: function() { 
     return [{ 
      header: 'Id', 
      dataIndex: 'Id', 
      sortable: true, 
      width: 10 
     }, { 
      header: 'Type', 
      dataIndex: 'ObjType', 
      sortable: true, 
      width: 10 
     }, { 
      header: 'Name', 
      dataIndex: 'Name', 
      sortable: true 
     }]; 
    }, 

    buildView: function() { 
     return new Ext.grid.GroupingView({ 
      forceFit: true, 
      groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})' 
     }); 
    }, 

    buildStore: function() { 
     return new Ext.data.GroupingStore({ 
      url: MyAppUrls.ListRelationshipMembers, 
      baseParams: { relationshipId: this.relationshipId }, 
      root: 'data', 
      fields: ['Id', 'ObjType', 'Name'], 
      sortInfo: { field: 'Name', direction: 'ASC' }, 
      groupField: 'ObjType' 
     }); 
    } 
}); 

網格正確渲染，並映射到MyAppUrls.ListRelationshipMembers的URL是正確的。該數據被檢索，且ListRelationshipMembers網址傳回下列JSON：

{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]} 

然而，即使網格渲染（列，邊框等）沒有數據顯示的實際電網雖然。由於這是我第一次使用數據存儲，所以我不確定自己做錯了什麼。任何幫助將是欣賞。

編輯：

我試圖更新商店必須通過下面的代碼讀者：

return new Ext.data.GroupingStore({ 
     url: MyAppUrls.ListRelationshipMembers, 
     baseParams: { relationshipId: this.relationshipId }, 
     fields: ['Id', 'ObjType', 'Name'], 
     sortInfo: { field: 'Name', direction: 'ASC' }, 
     reader: new Ext.data.JsonReader({ 
      root: 'data' 
     }), 
     groupField: 'ObjType' 
    }); 

沒有變化，數據網格沒有被填充記錄

Answer 1

埃文是正確的。你最大的問題是缺少讀者。那和你留在那裏的驗證存根需要返回true。如果你不能只是放下這些代碼並使其工作，你還有其他問題。

MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, { 
    autoHeight: true, 
    iconCls: 'icon-grid', 
    title: 'Relationship Members', 
    frame: true, 
    viewConfig: { forceFit: true }, 
    relationshipId: null, 
    documentId: null, 

     initComponent: function() { 
     if (this.verifyParameters()) { 
      // Initiate functionality 
      this.columns = this.buildColumns(); 
      this.view = this.buildView(); 
      this.store = this.buildStore(); 
      this.store.load(); 
     } 

     MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this); 
    }, 

    verifyParameters: function() { 
     // Verification code 
     return true; 
    }, 

    buildColumns: function() { 
     return [{ 
      header: 'Id', 
      dataIndex: 'Id', 
      sortable: true, 
      width: 10 
     }, { 
      header: 'Type', 
      dataIndex: 'ObjType', 
      sortable: true, 
      width: 10 
     }, { 
      header: 'Name', 
      dataIndex: 'Name', 
      sortable: true 
     }]; 
    }, 

    buildView: function() { 
     return new Ext.grid.GroupingView({ 
      forceFit: true, 
      groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})' 
     }); 
    }, 

    buildStore: function() { 
     return new Ext.data.GroupingStore({ 
      url: MyAppUrls.ListRelationshipMembers, 
      baseParams: { relationshipId: this.relationshipId }, 
      reader: new Ext.data.JsonReader({ 
       root: 'data', 
       fields: ['Id', 'ObjType', 'Name'], 
       sortInfo: { field: 'Name', direction: 'ASC' }, 
       groupField: 'ObjType' 
      }) 
     }); 
    } 
}); 

Answer 2

您尚未在商店中指定讀者，您需要在JsonReader中指定根目錄。

Answer 3

認爲你需要做的幾件事情在這裏：首先，作爲埃文提到的，你需要讀者添加到您的商店，就像這樣：

buildStore: function() { 
    return new Ext.data.Store({ 
     url: MyAppUrls.ListRelationshipMembers, 
     baseParams: { relationshipId: this.relationshipId }, 
     fields: ['Id', 'ObjType', 'Name'], 
     sortInfo: { field: 'Name', direction: 'ASC' }, 
     reader: new Ext.data.JsonReader({ 
      root: 'data' 
     }) 
    }); 
} 

我已經改變了商店在這裏輸入更簡單一些 - 是否有使用GroupingStore的特殊原因？請注意，root是在讀者中指定的，而不是商店本身。

然後，在你的專欄中，我會傾向於加渲染明確地確定了每個欄將顯示，如：

buildColumns: function() { 
    return [{ 
     header: 'Id', 
     dataIndex: 'Id', 
     sortable: true, 
     width: 10, 
     renderer: function (value, metaData, record) { 
      return record.data.Id 
     } 
    } ... ]; 
} 

我鑽進使用渲染器的習慣，因爲我在我的網格中相當大地修改我的列單元格的內容。注意傳遞給渲染器函數的參數;還有幾個你可以通過 - 見ExtJS API，如果你需要更多的信息你可以實際訪問。在該說明中，API文檔相當不錯 - 它可能需要一些深入研究，但如果您與ExtJS合作很多，絕對值得您花時間。