PDA

View Full Version : hover effect - gridView



golden_wing
11 Sep 2009, 6:28 AM
Hi there,

I have a grid that looks like this



grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, dataIndex: 'price'}
],
view: new Ext.grid.GridView({
getRowClass : function(record, index, rp, ds){
if(record.get('price')<50)
return 't1';
else
return 't2';
}
})
});css:


.t1
{
background:#f7f7f7;
}
.t1:hover
{
background:#99f;
}

.t2
{
background:#9ff;
}

.t2:hover
{
background:#000;
}
with the gridview I was able to color the rows depending on the price - however the hover effect I wrote for those classes won't work - it seems like the default-hover is used

does anybody have an idea?

Condor
11 Sep 2009, 6:31 AM
Disable the default row over with trackMouseOver:false.

golden_wing
11 Sep 2009, 6:40 AM
now there is no hover effect at all
is it enough just to write t1:hover? or do I have to write a hover-effect a different way?

i also tried



getRowClass : function(record, index, rp, ds){
if(record.get('price')<50)
return 't1 t1:hover';
else
return 't2 t2:hover';

Condor
11 Sep 2009, 6:42 AM
Set trackMouseOver:true again and try:

.t1 {
background:#f7f7f7;
}
.t1.x-grid3-row-over {
background:#99f;
}
.t2 {
background:#9ff;
}
.t2.x-grid3-row-over {
background:#000;
}
(but combined class selectors don't work very well in IE6/7)

golden_wing
11 Sep 2009, 6:45 AM
thanks a lot... works like a charm
:)

Condor
11 Sep 2009, 6:47 AM
And you don't care about IE6/7?

golden_wing
11 Sep 2009, 6:53 AM
oh ok now i got you... but what would be the workaround?

Condor
11 Sep 2009, 7:05 AM
It's ugly, but I'm using:

viewConfig: {
templates: {
row: new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"><table class="x-grid3-row-table {status}" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr></tbody></table></div>'
)
},
getRowClass: function(r, rowIndex, rp){
rp.status = r.get('price') < 50 ? 't1' : 't2';
}
}
with:

.t1 {
background:#f7f7f7;
}
.x-grid3-row-over .t1 {
background:#99f;
}
.t2 {
background:#9ff;
}
.x-grid3-row-over .t2 {
background:#000;
}