Notice that the email column is wrapping to show the full email in a new line
Hide the Email column from the column menu
Note that you can also easily reproduce it from http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel by modifying the CSS dynamically using the CSS I posted above and reproducing the same steps. That is why I tagged this as 4.1.3 instead of 4.1.1 which was used in the jsfiddle.
The result that was expected:
Each row has the height of just one line
The result that occurs instead:
Each row becomes as tall as there are letters in the hidden column
The problem is that hidden columns still take up height since only the columns inside x-grid-header-row have their width/height to 0. The width does propagate to all the tds, but the height doesn't, as it shouldn't.
The simplest solution I found is to listen for the 'columnhide' event, find all the tds for that column and apply a 'x-hidden-column' class to them. You also have to remember to apply it to columns that are initially hidden too.
The problem with this approach is that it requires applying a CSS class to each td, which can be expensive if you have lots of rows. It would be faster if we could apply that rule (using Ext.util.CSS) to the dynamically created CSS class (x-grid-cell-column-1011) for each column, then there would be no DOM querying and applying CSS to each td.
@evant Can you please link to the thread where EXTJSIV-6734 was created from so that I can track its progress? I did a google search but only mine and another post (also marked as a duplicate) came up.