PDA

View Full Version : Edit grid style



jask
12 Jan 2012, 2:46 PM
Hi,

i would like to recreate a note system that we use in our office. The way that it displays the information is perfect for us but i cannot figure out how to use a template on each gridrow depending if it is a employee note or system note. I made a screenshot of a couple of entries.

30672

This shows 3 notes a note entered by a employee and 2 made by the system. What would be the best way to approach this.

Thanks in advanced

slemmon
12 Jan 2012, 4:20 PM
See if this helps.

Example grid with getRowClass evaluating a value in the record and returning a custom css class if the condition is met.


Ext.widget('gridpanel', {
title: 'Grid'
, height: 200
, width: 200
, renderTo: Ext.getBody()
, columns: [{
text: 'Header'
, dataIndex: 'col'
}]
, store: {
fields: ['col']
, data: [{
col: 1
}, {
col: 2
}, {
col: 3
}]
}
, viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if (record.get('col') == 1) {
return 'custom-css';
}
}
}
})

and here is some CSS you can add to your page for the example


.custom-css .x-grid-cell
{
background: rgb(254,198,202);
background: -moz-linear-gradient(top, rgba(254,198,202,1) 0%, rgba(252,180,182,1) 10%, rgba(249,153,151,1)25%, rgba(250,159,156,1) 37%, rgba(251,162,159,1) 50%, rgba(249,125,123,1) 51%, rgba(253,177,189,1) 83%,rgba(255,201,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,198,202,1)), color-stop(10%,rgba(252,180,182,1)), color-stop(25%,rgba(249,153,151,1)), color-stop(37%,rgba(250,159,156,1)), color-stop(50%,rgba(251,162,159,1)), color-stop(51%,rgba(249,125,123,1)), color-stop(83%,rgba(253,177,189,1)), color-stop(100%,rgba(255,201,219,1)));
background: -webkit-linear-gradient(top, rgba(254,198,202,1) 0%,rgba(252,180,182,1) 10%,rgba(249,153,151,1)25%,rgba(250,159,156,1) 37%,rgba(251,162,159,1) 50%,rgba(249,125,123,1) 51%,rgba(253,177,189,1)83%,rgba(255,201,219,1) 100%);
background: -o-linear-gradient(top, rgba(254,198,202,1) 0%,rgba(252,180,182,1) 10%,rgba(249,153,151,1)25%,rgba(250,159,156,1) 37%,rgba(251,162,159,1) 50%,rgba(249,125,123,1) 51%,rgba(253,177,189,1)83%,rgba(255,201,219,1) 100%);
background: -ms-linear-gradient(top, rgba(254,198,202,1) 0%,rgba(252,180,182,1) 10%,rgba(249,153,151,1)25%,rgba(250,159,156,1) 37%,rgba(251,162,159,1) 50%,rgba(249,125,123,1) 51%,rgba(253,177,189,1)83%,rgba(255,201,219,1) 100%);
background: linear-gradient(top, rgba(254,198,202,1) 0%,rgba(252,180,182,1) 10%,rgba(249,153,151,1)25%,rgba(250,159,156,1) 37%,rgba(251,162,159,1) 50%,rgba(249,125,123,1) 51%,rgba(253,177,189,1)83%,rgba(255,201,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fec6ca',endColorstr='#ffc9db',GradientType=0 );
}

jask
13 Jan 2012, 11:38 AM
Thanks for the quick reply. This helps me somewhat but doest solve my problem compleatly. I want to have headers in my grid:

Type(telephone, system...)
Subject
Date/Time
Tone( how well the conversation went)

i still want to be able to sort by these things but i need some kind of a table structure under there to use the all the space for the actual note. It would almost be an addition to the row that is already there.