调整ExtJS网格面板行的高度

我正在使用ExtJS在选项卡面板中创建一个网格，每个单元格中都有链接。如果有多个链接，则该行应展开，以便在需要时将行加宽

我正在处理

4.1.1

示例（

var height row.js

）中的“带可变高度行的缓冲滚动”示例。我似乎无法让它与我的数据一起工作。网格正在显示，但没有一行可见。如果有人能告诉我我做错了什么，我将不胜感激

我收到的错误消息是

记录

是

未定义

，并且在代码末尾被调用

代码片段

 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);
 });

var-detailStore；
var网格；
var MON=‘星期一’；
var TUE=‘星期二’；
var WED=‘星期三’；
var THU=‘星期四’；
var FRI=‘星期五’；
var-SHIFT='SHIFT'；
Ext.define（'位置'{
扩展：“Ext.data.Model”，
字段：[{
姓名：SHIFT
}, {
姓名：MON
}, {
姓名：星期二
}, {
姓名：WED
}, {
姓名：THU
}, {
姓名：星期五
},
“行高”
]
});
函数LoadDetailsGrid（）{
//创建数据存储
detailStore=Ext.create（'Ext.data.Store'{
id:'detailStore'，
页面大小：50000，
//允许网格通过缓冲与分页滚动条交互
缓冲区：对，
//永远不要清除任何数据，我们会预先预取所有数据
purgePageCount:0，
模型：“位置”，
代理：{
键入：“内存”
}
});
detailGrid=Ext.create（'Ext.grid.Panel'{
宽度：700，
身高：500，
标题：“每周详细信息”，
商店：详细商店，
垂直滚动条：{
可变行高：true
},
loadMask：是的，
selModel：{
普拉内尔：错，
selectionMode:'MULTI'
},
视图配置：{
跟踪：错误
},
//网格柱
栏目：[{
弹性：1，
可排序：是的，
宽度：300，
数据索引：SHIFT
}, {
正文：星期一，
宽度：125，
可排序：false，
数据索引：MON
}, {
正文：星期二，
宽度：125，
可排序：false，
数据索引：星期二
}, {
正文：星期三，
宽度：125，
可排序：false，
数据索引：星期三
}, {
文本：THU，
宽度：125，
可排序：false，
数据索引：THU
}, {
正文：星期五，
宽度：125，
可排序：false，
数据索引：FRI
}],
renderTo:detailGridDiv
});
var data=createData（），
ln=数据长度，
记录=[]，
i=0；
对于（；i

如果您的代码示例是准确的，您甚至不会将记录加载到存储中。根据您所拥有的，尝试以下方法：

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

---

Ext.data.Store#add

方法将使用表示数据的对象创建模型实例。您不需要手动实例化每个记录。附带说明：当组件将成为容器的子项时，您不会在组件上使用

renderTo

config。

您能看到AJAX中返回的内容吗？