調整ExtJS Grid Panel行的高度

我正在使用ExtJS在將在每個單元中都有鏈接的選項卡面板中創建網格。如果有多個鏈接，則該行應該展開，以便在需要時行會更寬。我正在使用4.1.1示例（var-height-row.js）中的「可變高度行的緩衝滾動」示例。我似乎無法讓它與我的數據一起工作。網格顯示出來，但沒有任何行可見。如果有人能告訴我我做錯了什麼，將不勝感激！調整ExtJS Grid Panel行的高度

我收到的錯誤信息是''記錄'是未定義的「，並在我的代碼結束時被調用。

在此先感謝

var detailStore; 
var detailGrid; 
var MON = 'Monday'; 
var TUE = 'Tuesday'; 
var WED = 'Wednesday'; 
var THU = 'Thursday'; 
var FRI = 'Friday'; 
var SHIFT = 'shift'; 

Ext.define('Location', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: SHIFT }, 
     { name: MON }, 
     { name: TUE }, 
     { name: WED }, 
     { name: THU }, 
     { name: FRI }, 
     'rowHeight' 
    ] 
}); 

function LoadDetailsGrid() { 
// create the Data Store 
    detailStore = Ext.create('Ext.data.Store', { 
     id: 'detailStore', 
     pageSize: 50000, 
     // allow the grid to interact with the paging scroller by buffering 
     buffered: true, 
     // never purge any data, we prefetch all up front 
     purgePageCount: 0, 
     model: 'Location', 
     proxy: { 
      type: 'memory' 
     } 
    }); 

    detailGrid = Ext.create('Ext.grid.Panel', { 
     width: 700, 
     height: 500, 
     title: 'Weekly Detail', 
     store: detailStore, 
     verticalScroller: { 
      variableRowHeight: true 
     }, 
     loadMask: true, 
     selModel: { 
      pruneRemoved: false, 
      selectionMode: 'MULTI' 
     }, 
     viewConfig: { 
      trackOver: false 
     }, 
     // grid columns 
     columns: [{ 
      flex: 1, 
      sortable: true, 
      width: 300, 
      dataIndex: SHIFT 
     }, { 
      text: MON, 
      width: 125, 
      sortable: false, 
      dataIndex: MON 
     }, { 
      text: TUE, 
      width: 125, 
      sortable: false, 
      dataIndex: TUE 
     }, { 
      text: WED, 
      width: 125, 
      sortable: false, 
      dataIndex: WED 
     }, { 
      text: THU, 
      width: 125, 
      sortable: false, 
      dataIndex: THU 
     }, { 
      text: FRI, 
      width: 125, 
      sortable: false, 
      dataIndex: FRI 
     }], 
     renderTo: detailGridDiv 
    }); 

    var data = createData(), 
     ln = data.length, 
     records = [], 
     i = 0; 

    for (; i < ln; i++) { 
     records.push(Ext.create('Location', data[i])); 
    } 
} 


Ext.onReady(function() { 

    LoadDetailsGrid(); 

    var tabControl = new Ext.TabPanel({ 
     renderTo: 'tabs', 
     activeItem: 0, 
     width: 600, 
     height: 250, 
     plain: true, 
     defaults: { 
      autoScroll: true, 
      bodyPadding: 10 
     }, 
     items: [ 
      detailGrid 
     ]     // THIS IS WHERE THE ERROR HITS 
    }); 

    detailStore.cachePage(records, 1); 
    detailStore.guaranteeRange(0, 5); 
});

來源

2012-08-23 Jesse Roper

你能看到在AJAX中返回什麼嗎？ – Geronimo

如果你的代碼示例是準確的，你從來沒有記錄加載進店。根據你所擁有的，試試這個：

var data = createData(); 
detailStore.add(data);

的Ext.data.Store#add方法將創建使用表示數據對象模型實例。您不需要手動實例化每條記錄。作爲一個方面說明：當組件要作爲容器的子項時，不要在組件上使用renderTo配置。

來源

2012-08-24 00:43:41 Eric

調整ExtJS Grid Panel行的高度

回答

相關問題