Sencha Inc. | HTML5 Apps


Top Support Tips

June 19, 2014 | Sencha Support Team

Variable Heights in Grid Rows

by Seth Lemmons

Grid rows often maintain the same height throughout your grid. However, this may not always be the case, depending on the data you provide for the grid cells to consume. Under most circumstances, the grid will automatically adjust to accommodate variable height cells even with locked grids (which are actually composed of two synced grids). That said, you will notice the row heights are no longer synced on a locked grid when you use the bufferedrenderer plugin. Luckily, there is a workaround.

The row heights are not automatically determined between locked and normal grids generated by a locking grid with buffered renderer. This is due to the overhead created by attempting to calculate row heights. Therefore, the variableRowHeight plugin config is ‘false’ by default. If you find yourself in a situation in which your data doesn’t fit neatly into the standard grid row height, you can set the variableRowHeight to ‘true’. Then, the rows traversing the locked and unlocked grid sections will once again be aligned correctly.

You can see an example of variableRowHeight in action here, and learn more about variableRowHeight in our docs.

Listless Lists?

by Greg Barry

Have you recently updated your application to Sencha Touch 2.2+? If so, did your lists start loading sluggishly? I have good news. Earlier versions of Sencha Touch had infinite set to "true" for lists. However, newer versions of Sencha Touch have it set to false by default.

That said, if you weren't implicitly setting infinite:true on your lists, they would start defaulting to false in Sencha Touch 2.2+. This can make for very slow list rendering. This slowness occurs because all list items will try to render at the same time. As you can imagine, this may result in some slower load times. Simply setting infinite to true allows the list to render in smaller sections and returns your list to its former state.

You can learn more about the infinite configuration in our docs.

There are 4 responses. Add yours.


10 months ago

Thanks for the tips! We’ve translated this into Japanese here:


9 months ago

In fact, it’s better to configure variableRowHeight just on the column that is expected to contain the variable height data.

This is because in the absence of the global setting mentioned above, the BufferedRenderer will interrogate the columns to check if it has to contend with variable row heights.

And it only uses the slightly slower variable row height calculations if there are variableRowHeight columns *visible*.

Don Griffin Sencha Employee

9 months ago

True there—worth mentioning though that “variableRowHeight” on a per-column basis in new to Ext JS 5.0

Marc Gusmano

9 months ago

I tried the variableRowHeight Sencha Fiddle example and changet to Ext 5 and Crisp and it did not work properly…

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.