PDA

View Full Version : Colored grid columns



elbino
14 Sep 2010, 12:30 AM
Hallo everybody,

I just have a new problem with my extJS grid. Ohm, is it possible to color single columns of a grid panel? Not the rows, only columns. It's because I have to highlight the mandatory columns and I wasn't able to find an example for this case. If it's possible, how does it work?

Thanks & greetings
Thomas

Animal
14 Sep 2010, 12:35 AM
http://dev.sencha.com/deploy/ext-3.3-beta1-6976/docs/?class=Ext.grid.Column&member=id

Condor
14 Sep 2010, 12:35 AM
Give your columns an id and write a css rule for .x-grid3-td-<id>.

elbino
14 Sep 2010, 12:48 AM
Does this mean, when my column has the id "comment" I have to write:


.x-grid3-td-comment{
...
}

Animal
14 Sep 2010, 12:49 AM
Try it!

elbino
14 Sep 2010, 1:03 AM
It works! Thanks! :-) Looks terrible but it works.

elbino
14 Sep 2010, 1:40 AM
Ohm, now they want that only the cells of the selected row are coloured. Means when selecting a cell of a row all the cells that are editable shall be coloured in one color and all the mandatory cells in another one. Is this possible with ext? And/Or is there any example? :-( This seems tricky.

Condor
14 Sep 2010, 1:45 AM
Make a css rule for:

.x-grid3-row-selected .x-grid3-td-comment {...}

ps. The css rule for x-grid3-row-over could still hide a background color, because it uses a background image.

elbino
14 Sep 2010, 1:51 AM
Thanks. I tried:


.x-grid3-row-selected .x-grid3-td-comment{
background-color: #FFFF00 !important;
}This does not take effect. Is there something wrong?

Edit:
Do I have to activate some kind of row-selector for my grid or something like that? Because when I select a cell only the cell itself is selected and not the whole row.

This is an "EditorGridPanel".

Condor
14 Sep 2010, 2:22 AM
'x-grid3-row-selected' assumes you are using a RowSelectionModel instead of a CellSelectionModel.

elbino
14 Sep 2010, 2:31 AM
Hm, okay. Thanks. Can I change the selection model somehow?

Condor
14 Sep 2010, 2:35 AM
Yes, simply specify a different one in the grid config, e.g.

selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})

elbino
14 Sep 2010, 2:41 AM
Works great! Thanks!!! :-)

elbino
14 Sep 2010, 3:51 AM
Sorry, but I think, I have to ask one more thing. I implemented this:


selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
})

Okay, this works fine. But there is some code, doing:


grid.getSelectionModel().on('rowselect', function(sm, rowIdx, colIdx){
var r = grid.getStore().getAt(rowIdx);
var di = grid.getColumnModel().getDataIndex(colIdx);
...

Problem: The "colIdx" parameter does not longer have a numeric value. It contains the whole row. This lets the app crash. Is it possible to get the colIdx parameter, anyhow? Thanks a lot!

elbino
14 Sep 2010, 5:14 AM
Hm, okay. Tried some other things. Does not seem to be a good idea at all. Think it would be better to color the whole column (but not the header!). But if I want several columns to appear red they all must have the same id, right? Is it possible to use another identifier?

Condor
14 Sep 2010, 5:20 AM
1. Correct, the rowselect event doesn't have a colIndex. Any specific reason you need this event? Could you use cellclick instead?

2. Give each column a different id and create the same style rule for all ids.

The other way is to use a column renderer that assigns a classname to meta.css, e.g.

renderer: function(value, meta){
meta.css = 'red-cls';
return value;
}

elbino
14 Sep 2010, 5:35 AM
1. There are fields that are updated by typing in text areas. This does not work anymore because the specific column index is needed to find this column. But there are more problems, so I think this would become much too complex.

The "other way" seems to be interesting because I do not want to change the color for every id. :-/ Where can I use the column renderer? Something like this?


var columns = [

{
id:'periode',
header: 'Periode',
renderer: function(value, meta){
meta.css = 'red-cls';
return value;
},
width: 150,sortable: true,
dataIndex: 'periode',
hidden: true, renderer: Ext.util.Format.dateRenderer('d.m.Y') }...After this I have to create a css rule for 'red-cls'?

Condor
14 Sep 2010, 5:47 AM
No, now you are specifying the renderer twice.

You want:

renderer: (function(){
var renderDate = Ext.util.Format.dateRenderer('d.m.Y');
return function (value, meta) {
meta.css = 'red-cls';
return renderDate.apply(this, arguments);
}
})()

elbino
14 Sep 2010, 6:25 AM
Hm, I tried it this way. But now the dateRenderer does not work anymore. :-( Instead the cell prints the code: "function (value, meta) { meta.css = "red-cls"; return renderDate.apply(this, arguments); }"

Condor
14 Sep 2010, 6:39 AM
Post your column code again. I assume you made a typo somewhere.

elbino
14 Sep 2010, 6:47 AM
Thanks. Here it is (sorry for the formatting! The editor I have to use is horrible!):


var columns = [{
id:'r_periode'
,header: 'Periode'
,width: 150,sortable: true
,dataIndex: 'r_periode'
,renderer: (function(){var renderDate = Ext.util.Format.dateRenderer('d.m.Y');return function(value,meta){meta.css='red-cls';return renderDate.apply(this, arguments);}}) } ];

And I can't find any mistake. :-(

Condor
14 Sep 2010, 6:56 AM
You are missing the () at the end of the anonymous function.

ps. Run your code through jsbeautifier.org if you don't like the formatting.

elbino
14 Sep 2010, 7:07 AM
Yesssss! Works! :-) Thanks a lot!!! But there is one more side effekt: The width of the column is much bigger now, although it should have "width: 150". Is there anything wrong with the "width" argument?

Condor
14 Sep 2010, 7:11 AM
1. This could be caused by a previous column width from the site cookie (if you are using a CookieProvider).
2. It could also be caused by the red-cls class (did you specify a width in there?).

elbino
14 Sep 2010, 7:13 AM
Ah, I guess this is because I had a very large value in there before (cause it printed the function code and not the date). It seems to work now. I think this is exactly what I need. Thank you so much!!!

elbino
15 Sep 2010, 12:12 AM
Hallo,

I just implemented the column renderer as you suggested:


renderer: function(value, meta){
meta.css = 'red-cls';
return value;
}I wrote a css rule:


.red-cls{
background-color: #FFCCCC !important;
}This works! :-) Unfortunately this way of coloring is very "static". Is it possibile to get some effect into it, so that selected cells are highlighted and to get the "stripe effect" into the rows?

Thanks & greetings
Thomas

Condor
15 Sep 2010, 12:36 AM
1. Write an extra css rule for ".x-grid3-row-selected .red-cls" (assuming you are using a RowSelectionModel).
2. Write an extra css rule for ".x-grid3-row-alt .red-cls" (assuming you configured your grid with stripeRows:true).

elbino
15 Sep 2010, 12:47 AM
Ah, okay. This should have come up to my mind. :-) Thanks! Ohm, rowSelectionModel is not active (because I need the column index), but selected cells typically get another color. Is there also a css rule cor cell selection? BTW: Can I find a list with css rules anywhere?

Condor
15 Sep 2010, 12:59 AM
A CellSelectionModel adds the x-grid3-cell-selected class to the td and you are using the same td for your red-cls.

Normally, you would write a css rule for ".x-grid3-cell-selected.red-cls", but IE6/7 can't handle that.

elbino
15 Sep 2010, 1:04 AM
Ah, this is okay. It only has to work in Firefox because we do not support IE. ;-) Great, this is all I need! Thanks!!!