PDA

View Full Version : No multiline grid row despite of css config



janhov
21 Feb 2010, 1:30 PM
Why is there only one line in the following grid row?



var grid = new Ext.grid.GridPanel({
store: new Ext.data.ArrayStore({
fields: [
'text'
],
data: [
[ 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' ]
]
}),
cm: new Ext.grid.ColumnModel([
{
id: 'text',
header: 'Text',
dataIndex: 'text',
width: 500,
css: 'white-space:normal;'
}
]),
renderTo: 'myDiv'
});


(Using 3.1.1)

goldledoigt
22 Feb 2010, 1:06 AM
If you expect multiple rows :
Add something to break the line (<br />)
Please try in your grid config :

autoHeight:true



var grid = new Ext.grid.GridPanel({
autoHeight:true,
store: new Ext.data.ArrayStore({
fields: [
'text'
],
data: [
[ 'Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.<br /> Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' ]
]
}),
cm: new Ext.grid.ColumnModel([
{
id: 'text',
header: 'Text',
dataIndex: 'text',
width: 500,
css: 'white-space:normal;'
}
]),
renderTo: 'myDiv'
});

janhov
22 Feb 2010, 1:15 AM
I see, thanks. But now I can't put a piece of text in there without breaking the line manually? I expected white-space:normal to take care of that?

goldledoigt
22 Feb 2010, 1:27 AM
OK I got you ... sorry for my brain delay.

To get the expected result I had to change the underlying div element of the cell like this:



.x-grid3-cell-inner, .x-grid3-hd-inner {
overflow:hidden;
padding:3px 3px 3px 5px;
white-space:normal;
}


(I am using FF 3.0.18)

does it help you ?

janhov
22 Feb 2010, 1:52 AM
Yes it does, thanks. I thought the css: config would override the element style, but I can see in Firebug it doesn't and I should have seen that myself before asking :) Thanks anyway.

goldledoigt
22 Feb 2010, 3:05 AM
I guess you can simply override the element style with help of "getRowClass" from Ext.grid.GridView.

janhov
22 Feb 2010, 3:24 AM
You're right.