PDA

View Full Version : Grid cell wrapping issue on column hide



offshoreteam
18 Apr 2013, 3:52 AM
We have a column where we have big text to show...but due to the width of column the text is not getting displayed and it show ellipses at the after few characters...

one of the solution i found on the forum is to apply a custom css..



.x-grid-cell-inner {
white-space: normal !important;
}


This works fine for a normal grid but if we have grid's show/hide column feature enable and if we hide the same column, entire grid's height is increasing. This way we loose the actual style of the grid.

slemmon
19 Apr 2013, 3:32 PM
Grids/gridviews don't have a config for textwrap, but the below snippet might help you:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf as', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
cls: 'my-grid',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
//height: 200,
width: 400,
renderTo: Ext.getBody()
});


grid.down('headercontainer').on({
columnhide: function () {
grid.el.toggleCls('my-grid');
grid.getView().refresh();
}
, columnshow: function () {
grid.el.toggleCls('my-grid');
grid.getView().refresh();
}
});