[CLOSED]setting triangle in field based on values

[ThierryC]

Hi,

similar to the upper left triangle in a grid-field when changing a value, i'd like to set triangles manually based on value

F.e what i now like to do :

- mark a green right lower triangle if the use has entered some comments,

- and f.e blue upper right corner to indicate that there's a tooltip available

is this possible, and if yes how... i thought it would be ideal if this were possible with a render-function..

[sean.lanktree]

Yes, this is possible. The red triangle that you see when a cell is "dirty" is due to CSS class: x-grid3-dirty-cell. It is defined as follows:


.x-grid3-dirty-cell {
background:none no-repeat scroll 0 0 transparent;
}
.x-grid3-dirty-cell {
background-image:url("/vvresources/icons/add.png/dirty.gif");
}


Notice that the red triangle is an image: "dirty.gif".

In your case, I would set up new CSS class for each condition:

Comments entered
Tooltip Available


Let's do that first, so at the top of your program...


<style type="text/css">
.x-grid3-comments-cell {
background:none no-repeat scroll 0 0 transparent;
}
.x-grid3-comments-cell {
background-image:url("/path_to_your_image");
}
.x-grid3-tooltip-cell {
background:none no-repeat scroll 0 0 transparent;
}
.x-grid3-tooltip-cell {
background-image:url("/path_to_your_image");
}
</style>

Notice that you will need to provide the image for each CSS class.

Now, as you suggested, you can use a renderer to simply apply the appropriate class when necessary.

[CODE]
renderer: function(val){
if (condition == 'has_Comments'){
return String.format('<div class="x-grid3-comments-cell">' + val);
}
}

[ThierryC]

Hi Sean,

great, thanks for your clear and quick explanation

i'll give it a try


Thierry