Make all cell text visible in ExtJS grid component

Question

I developed application in ExtJS that has a grid component. It works well, loads data and shows them properly. I have column Description which often has lot of text to be shown.

In the grid component the text is shown in one line and once the next column starts the text gets hidden, so you need to strech the Description column in order to read the remaining text.

In HTML basic table this is easy, set up width of the table and all text is wrapped/pushed to the next line in the cell according to the overall width of the table.

How can I do this in my extjs4 grid panel component, or is it possible?

SOme existing extjs grid property/config?

Answer 1

You can find a great tutorial to resolve your problem of multiline row HERE. This Tutorial is from Loiane Groner.

You just need to add this to your CSS file :

.x-grid-row .x-grid-cell-inner {
    white-space: normal;
}
.x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
    white-space: normal;
}

Hope this will be helpfull for you!