PDA

View Full Version : How 'grey-out' fields in grid panel?



steve25
22 Jul 2013, 1:26 AM
I have created an Ext.grid.Panel and would like to "grey-out" fields in the
grid depending on the value of one of the fields in the store/grid.

I tried using a renderer on one of the columns, and called setDisabled on
the items in the rows but this removed the contents of the grid having the
required condition altogether.

Please can you clarify how fields in a grid panel can be greyed-out?

Thank you
Steve

EPV
22 Jul 2013, 2:13 AM
Try this!



renderer:function(value, metaData){
if(value === "foo") {
// Add a style to the td if a certain value is "foo"
metaData.style="color:lightgray";
}
return value;
}


Good luck / E

steve25
22 Jul 2013, 6:29 AM
Thank you for reply - however am still getting same result.
Where should the renderer be placed?
Below is structure of class:



Ext.define('App.view.Test' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.Test',
id: 'test',
selType: 'rowmodel',
multiSelect: false,
store: 'Tests',

viewConfig:{
markDirty:false,
getRowClass: function(record, index) {
var d = record.get('isDeleted');
// this was used if wanted to set background color of row
}
},
columns : [{
header : 'id',
sortable : true,
dataIndex : 'id',
hidden: false
},
{
header : 'Reference',
sortable: true,
dataIndex : 'name',
id: 'name',
width: 300,
renderer: function(value,metadata,record){
var isDeleted = record.get('isDeleted');
if (isDeleted == true)
metaData.style = "color:lightgray";
}

},
{
header : 'Date modified',
sortable: true,
dataIndex : 'dateTime',
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
width: 200
},
{
header : 'Deleted',
align: 'center',
sortable: true,
dataIndex : 'isDeleted',
id: 'isDeleted',
width: 70
},
{
header: 'view',
xtype : 'actioncolumn',
align: 'center',
width: 70,
...
getClass: function(value,metadata,record){
var isDeleted = record.get('isDeleted');
if (isDeleted == false)
return 'x-action-col-icon';
else
return 'x-action-col-grey-icon';
},
renderer: function(value,metadata,record){
var isDeleted = record.get('isDeleted');
if (isDeleted == true)
this.items[0].tooltip = '';
}
}
tbar: [
{
xtype: 'textfield',
fieldLabel: 'Reference',
labelWidth: 60,
id: 'reference',
plugins: ['clearbutton']
},
{
xtype: 'datefield',
fieldLabel: 'Date',
id: 'startDate',
format: 'Y-m-d',
labelWidth: 60,
width: 170,
plugins: ['clearbutton']
},
...
],
initComponent: function() {
this.callParent(arguments);
}
});


Steve

EPV
22 Jul 2013, 9:03 AM
You have placed the renderer correctly but must return the value (see my example):



return value;

steve25
23 Jul 2013, 12:41 AM
Hello,

Thank you again for reply. However am still getting same results.

I also tried the following.
Created css:
.greyedoutText {
color:red !important;
}

In the column where header = 'Deleted',
renderer: function(value,metadata){

metaData.tdCls = 'greyedoutText';

return value;
}

The results are that all column values prior to the column 'Deleted' are displayed (not greyed-out)..
All column values (and the row background color) from the 'Deleted' column onwards
are not displayed (completely wiped out).

If I just return value in the renderer, all values are displayed correctly - however
obviously the data is not greyed-out as required.

I am using v4.2.1 and ext-all-gray.css

Kind regards,
Steve

EPV
23 Jul 2013, 1:12 AM
It looks like you are missing a curly brace in the renderer.

steve25
23 Jul 2013, 2:01 AM
Hello,
Thank you,
infact the problem was that I had an uppercase D in metaData whereas the renderer was expecting lowercase -
apologies for that.

That has mostly fixed the issue - however there is still one issue, nameley the 'Date modified' field now
has 2 renderers as below. The system only handles the last of the renderers declared. Would you know
an appropriate solution for this?

{
header : 'Date modified',
sortable: true,
dataIndex : 'dateTime',

renderer: function(value,metadata, record){

var isDeleted = record.get('isDeleted');
if (isDeleted == true)
metadata.style = "color:lightgray";

return value;

},
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
width: 200,

},


kind regards,
S.

EPV
23 Jul 2013, 3:45 AM
Combine them into one.

steve25
24 Jul 2013, 2:03 AM
Thank you,

It is now working.

I combined the 2 renderers as below (I assume this is correct).

renderer: function(value,metadata, record){

var isDeleted = record.get('isDeleted');
if (isDeleted == true)
metadata.style = "color:lightgray";

return Ext.util.Format.date(value,'Y-m-d H:i:s');
}


Kind regards,
S