Top Support Tips

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.


  1. Animal says

    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*.

  2. Don Griffin says

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

  3. Marc Gusmano says

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

  4. victor says

    The fix for issue “Variable Heights in Grid Rows” does not really work.
    The workaround in fiddle sample works good up to 35 rows…
    And the issue appears again with 36 rows. :-)
    Tested on IE11 and Chrome 46.0.2490.86.

Leave a Reply

Your email address will not be published. Required fields are marked *