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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Ext.onReady(function(){ var gridData ={'results': [ {'name':'Jaspreet','hob':'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\' standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'}, {'name':'Chahal','hob':'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\' standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'}, {'name':'Yuvraaj','hob':'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\' standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'} ] }; var store = Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'name'}, {name: 'hob'} ], data: gridData, proxy: { type: 'memory', reader: { type: 'json', root:'results' } } }); var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [ { text : 'Name', width : 50, dataIndex: 'name' },{ text : 'Hobbies', flex : 1, dataIndex: 'hob' } ], height: 350, width:600, title:'Multi row example', renderTo: 'playcontainer' }); }); |
Now when you look at the grid you will get something like this
The Markup
|
1 2 3 |
<div id="myGrid"> <div id="playcontainer" style="margin:50px"></div> </div> |
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
Now lets add a very basic CSS rule as shown below
|
1 2 3 4 5 6 |
.x-grid-row .x-grid-cell-inner { white-space: normal; } .x-grid-row-over .x-grid-cell-inner { white-space: normal; } |
When we add above CSS rules on our page lets see what difference it will make
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
[ltu]
As you see that in our markup we have a parent container with ID: myGrid so lets utilize that
|
1 2 3 4 5 6 |
#myGrid .x-grid-row .x-grid-cell-inner { white-space: normal; } #myGrid .x-grid-row-over .x-grid-cell-inner { white-space: normal; } |
[/ltu]
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,
Really good idea
but if you filter column it will mess the user interface
Oh my goodness! Amazing article dude! Thank you, However I am experiencing difficulties with
your RSS. I don’t know why I cannot subscribe to
it. Is there anybody getting similar RSS issues? Anyone who knows the answer can you
kindly respond? Thanx!!