PDA

View Full Version : Format a row in grid



hieu79vn
13 Apr 2012, 12:36 PM
Hello,

I have a grid with 6 rows, and I want to format only one row in blue, underline, cursor: hand, text align-center. I do like this
viewConfig: {
getRowClass: function (rec, idx, rowPrms, ds) {
return rec.data.content == 'Test test test' ? 'bold_row1' : '';
}
},
But as you see in the image below, the row is formatted only in blue and underline, but it's not aligned center and doesn't have cursor hand when mouse is over it.
css file:
.bold_row1 td{
font-weight:bold !important;
color: Blue;
text-align:center;
text-decoration:underline;
cursor: pointer;
}
34013

Thank you

scottmartin
13 Apr 2012, 2:24 PM
See if the following will work:



.bold_row .x-grid-cell-inner {
font-weight: bold !important;
color: blue;
text-align: center !important;
text-decoration: underline;
cursor: pointer;
}




Ext.onReady(function () {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name'],
data:{'items':[
{ 'name': 'Lisa' },
{ 'name': 'Bart' },
{ 'name': 'Homer' },
{ 'name': 'Marge' }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name', flex: 1 } // , align: 'center'
],
height: 200,
width: 400,
selModel: {
selType: 'cellmodel'
},

viewConfig: {
getRowClass: function(record, index) {
var name = record.get('name');
if (name === 'Bart') {
return 'bold_row';
}
}
},
renderTo: Ext.getBody()
});
});



34019

Regards,
Scott.

hieu79vn
16 Apr 2012, 5:15 AM
it works very well. Thank you Scott

hieu79vn
16 Apr 2012, 5:33 AM
Hi Scott,
If I want to make the height of this row smaller, is it possible?

Thanks

scottmartin
16 Apr 2012, 7:09 AM
Add line-height to your CSS rule:



.bold_row .x-grid-cell-inner {
font-weight: bold !important;
color: blue;
line-height: 5px;
text-align: center !important;
text-decoration: underline;
cursor: pointer;
}


Regards,
Scott.