PDA

View Full Version : actioncolumn, no icon but area is clickable



peterkuli
23 Sep 2011, 1:52 AM
I have an actioncolumn in which I only need an icon when certain conditions are true. Otherwise, no icon needs to be displayed.

My actioncolumn is configured as follows:



icon: '',
getClass: function(v, meta, rec) {
if (rec.get('statusid') == 99) {
return 'rmaAnnuleerButton';
} else {
return 'rmaAnnuleerButtonHide';
}
}


rmaAnnuleerButton is just a CSS class:


.rmaAnnuleerButton{
background-image: url('../images/icons/cancel.png') !important;
}


or, rmaAnnuleerButtonHide:


.rmaAnnuleerButton{
background-image: none !important;
}


So far so good; an icon is displayed when needed and no icon is displayed when not needed. But, the area in the actioncolumn is clickable when no icon is displayed.

Is there a solution for that?

pcr
23 Sep 2011, 9:30 AM
Hi I solved simular problem with a small addition to my css-code.

/* shared styles for the ActionColumn icons */
.x-action-col-cell img {
height: 16px;
width: 16px;
cursor: pointer;
}
.x-action-col-cell img.icon-mime-ascii {
background-image:url('../images/icons/mime/ascii.png') ! important;
}

peterkuli
25 Sep 2011, 11:34 PM
Thanks. It indeed renders the cursor differently but the area is still clickable. But I think this will do. Thanks again!

mjhaston
26 Sep 2011, 7:24 AM
.x-action-col-icon {
height: 16px;
width: 16px;
margin-right: 8px;
}
.someCss {
background-image: url(../icons/report.png);
height: 16px;
width: 16px;
}
.emptyCss{ height: 0px;
width: 0px;
}



getClass : function(v, meta, rec) {

var myDate = new Date(rec.get('visit-date'));
var myDateYear = myDate.getFullYear();
var currentDate = new Date();
var currentYear = currentDate.getFullYear();

if (myDateYear == currentYear) {
return 'someCss';
} else {
return 'emptyCss';
}

}