Question

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

我正在使用4.1.1示例（var-height-row.js）中的“带有可变高度行的缓冲滚动”示例。我似乎无法使用我的数据。网格显示，但没有任何行可见。如果有人能告诉我我做错了什么，我将不胜感激！

我收到的错误消息records为undefined，并在我的代码末尾附近被调用。

CODE SNIPPET

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

Answer 1

如果您的代码示例准确无误，您甚至都不会将记录加载到商店中。根据你所拥有的，试试这个：

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

Ext.data.Store#add方法将使用表示数据的对象创建模型实例。您无需手动实例化每条记录。作为旁注：如果组件将成为容器的子项，则不要在组件上使用renderTo配置。

调整ExtJS网格面板行的高度

1 个答案: