PDA

View Full Version : Add a carriage return on a gridPanel



Nheil
11 Mar 2011, 1:20 AM
Hi everyone,

I am looking for a solution about this problem.
I have a gridPanel load with datastore.


var grdActionsTickets = new Ext.grid.GridPanel({
id: 'grdActionsTickets',
renderTo: document.getElementById('divcontentProblemeHtml' + numAppel),
ds: stoTicketsActionPublique,
title: 'Action sur votre ticket',
iconCls: 'linkBreak',
loadMask: {showMask: true, msg: 'Chargement en cours...'},
width: 800,
height: 400,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
cm: new Ext.grid.ColumnModel([
{header: "Date de l'Action", dataIndex: 'DAction', width: 148, sortable: true},
{header: "Type de l'Action ", dataIndex: 'TypeAction', width: 148, sortable: true},
{header: 'Commentaire', dataIndex: 'ComPublic', width: 500, sortable: true}
])


But i want to add a carriage return when my ComPublic is bigger than my column size.

http://uploads.siteduzero.com/files/301001_302000/301482.jpg

Thank you.

Nheil

fay
11 Mar 2011, 2:33 AM
http://www.sencha.com/forum/showthread.php?98221-RESOLVED-Extjs-3.2-grid-cell-with-long-string-inside&p=463386&viewfull=1#post463386

Nheil
11 Mar 2011, 2:34 AM
I don't understand how to use it on my example..

fay
11 Mar 2011, 2:40 AM
Override the style by adding the following to your HTML page:



<head>
...
<style>
.x-grid3-cell-inner {
white-space:normal !important;
}
</style>
...

Nheil
11 Mar 2011, 2:45 AM
Can i add this propertie only for one gridPanel?
Because it is apply to every gridPanel of the page

fay
11 Mar 2011, 2:50 AM
Add an id to your grid's config, and then specify that your CSS override only applies to that id:



<head>
...
<style>
#your-grid-id .x-grid3-cell-inner {
white-space:normal !important;
}
</style>
...



See also: http://www.w3schools.com/css/default.asp

Nheil
11 Mar 2011, 3:18 AM
i actually have an id on my gridPanel, gridActionsTickets, but i can't add this id in css, it doesn't work.

fay
11 Mar 2011, 3:46 AM
Certainly works for me, I just tested it in the array-grid.html example (where I added another GridPanel to ensure that it was only applied to one of them). There's something else amiss with your code.

You've tried?



<head>
...
<style>
#gridActionsTickets .x-grid3-cell-inner {
white-space:normal !important;
}
</style>
...


What do you see when you inspect the grid's CSS with Firebug?

Nheil
11 Mar 2011, 4:53 AM
i have exactly the same code:




#gridActionsTickets .x-grid3-cell-inner {
white-space:normal !important;
}


it is like my gridPanel id is not gridActionsTickets..

Nheil
11 Mar 2011, 5:05 AM
this what i get from firebug

<div id=grdActionsTickets" class="x-panel x-grid-panel" style="width:800px;">

fay
11 Mar 2011, 5:35 AM
Your div's id is missing an opening double-quote and you've named it grdA... not gridA...

Nheil
11 Mar 2011, 5:42 AM
really thanks fay.