PDA

View Full Version : Actioncolumn: change icon on grid when user click on it (like Starred mail in gmail)



hieu79vn
9 Apr 2012, 12:45 PM
Hello
I would like to do like the function Starred in gmail. There is a star blank icon next to the mail subjet. If users click on the star, il will change to a yellow star. Could you tell me how to do like that with actioncolumn?

Thank you very much
Tang

skirtle
9 Apr 2012, 1:41 PM
You need a field in your record that determines whether or not the star is shown.

On your column, specify a getClass function that reads in the relevant field from the record and adds the correct CSS class accordingly.

Then, in your handler function, switch the value in the record. The grid will refresh itself automatically.

hieu79vn
10 Apr 2012, 2:09 AM
I will try it. Thank you

hieu79vn
10 Apr 2012, 5:31 AM
Hi,

I tried with these codes


<style type="text/css">
.x-action-col-cell img.empty-star {
background-image: url('../../../image/star_white.gif');
}
.x-action-col-cell img.full-star {
background-image: url('../../../image/star.gif');
}
</style>
and then in java script

{
xtype: 'actioncolumn',
width: 30,
items: [{
tooltip: 'Favorite',
getClass: function(v, meta, rec) { // return the correct CSS for field value
if (rec.get('is_favorite') == true) {
return 'full-star';
} else { return 'empty-star'}
},
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
if (rec.get('is_favorite') == 1)
rec.set('is_favorite', 0 );
else
rec.set('is_favorite', 1 );
}
}]
}

But it seems that the css is not applied to the column. I tried to inspect the element in the web page and see the 2 image star and star_white are loaded but it is not shown in the column. Do you know why?
Thank you.