Extjs 4.1.1 – how to fix row resize phenomena

Recently I’ve encountered annoying problem with extjs grid. After hiding columns with long wrapped text, height of rows was dramatically increased. Here are some screens presenting this particular situation. Grid with all columns shown;
and grid with one column hidden
row resize
The code responsible for rendering this grid is shown below

After some digging, it turned out that Extjs hides columns by setting their width to 0px. In order to solve this problem and preverse text wrap in cells, I implemented small workaround. Let’s start from creating CSS class which disables word wrapping in grid cells.

Next, we have to start listening for two events

  • columnhide
  • columnshow

In handlers of these events, we have to modify tdCls property of hidden column – add noWrap class, if column is hidden and delete this class otherwise.

From now hiding and showing columns works fine
Entire code listing is presented below

Extjs 4.1.1 – how to fix row resize phenomena