Extjs 4 - Dynamic ellipsis on Grid headers

Question

My Grid resizes as the browser resizes. Now the Grid headers are too long and when the Grid shrinks, the text is cut off. The CSS solution requires me to give a fixed with to it, which is not possible since the headers will be resized. Is there a dynamic way to add ellipsis when the header width falls below a certain value?

Answer 1

So easy! I wrote an entire function to add ellipsis and then found out the solution is just to explicitly set the span's style as display: inline. The Ellipsis shows up automatically!

.x-column-header-text { display: inline; }