ExtJS Grid Multi-line rows

Yes, I heard you saying why there is no option or setting to force cell to wrap. Good news is that its very easy to achieve this.

Without me wasting much of you valuable time lets jump straight to the point.

Lets form a grid first.

ExtJS Grid code

Now when you look at the grid you will get something like this

The Markup

Above element is necessary because we are rendering our grid to #playcontainer. Outer #myGrid is there for a reason. I will tell you in a bit why.

What we get because of above is something like this

Extjs multiline grid example

 

Now lets add a very basic CSS rule as shown below

When we add above CSS rules on our page lets see what difference it will make

ExtJS Grid multiline example

That made a a huge difference. And we get what we expected. Anyway this solution will lead to affect all grids but making a very basic change to our CSS rule we can overcome this

As you see that in our markup we have a parent container with ID: myGrid so lets utilize that

And that is it. Grid inside our marked id myGrid will be the only one that will get affected by our CSS change.

Demo

Demo is available for you to have a look from this link

If you know something better in terms of solutoin then do leave your solution in your comments so that other readers can benefit from it.

I hope this helps.

Cheers,

VN:R_U [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:R_U [1.9.22_1171]
Rating: 0 (from 0 votes)

Speak Your Mind

*

CommentLuv badge