Adjusting height of ExtJS Grid Panel rows

Question

I'm working with ExtJS to create a grid in a tab panel that will have links in each cell. If there are more than one links, the row should expand so that the rows will be wider when they need to be.

I'm working off of the "Buffered Scrolling with variable height rows" example in the 4.1.1 examples (var-height-row.js). I can't seem to get it to work with my data. The grid is showing up, but none of the rows are visible. If anyone could tell me what I'm doing wrong, it would be greatly appreciated!

The error message I'm getting is records is undefined and gets called near the end of my code.

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

Eric Eric · Accepted Answer · 2012-08-24T00:43:41

If your code example is accurate, you never even load the records into the store. Based on what you have, try this:

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

The Ext.data.Store#add method will create model instances using objects representing the data. You don't need to manually instantiate each record. As a side note: you don't use the renderTo config on a component when it is going to be the child item of a container.

Adjusting height of ExtJS Grid Panel rows

1 Answers