PDA

View Full Version : Nested Grid with CSS problem



Vepe
10 Jun 2010, 6:59 AM
Hi Guys! I'm having a little problem of CSS with nested grids =(

First of all I 'm using this plugin (http://mikhailstadnik.com/ext/examples/nested-grid.htm) to do my code and for the CSS of both grids, I use the getRowClass function of the plugin (I changed it a little bit.. just to put the colors and background)

The problem is... when I select the row of the outside grid (this add the class x-grid3-row-selected to the div, isn't it??), the inner ones changes too! =(

I'm a newbie with all these (extjs, javascript, css...) and I don't know very well how to not set the class to the inner grid.
Can you help me? Any tips? =P





CSS's

.x-grid3-row-selected .x-grid3-cell-inner {
color: #006600;
}
.normal
{
background:white;
color:black;
}
.rouge
{
background:#B22222;
color:white;
}
.rouge div
{
color:white;
}
.vert
{
background:#2E8B57; color:white;
}
.vert div
{
color:white;
}
.vertFonce
{
background:#66FF66; color:white;
}
.vertFonce div
{
color:white;
}
.violet
{
background:#660033; color:white;
}
.violet div
{
color:white;
}
.vertClair
{
background:#00FF00; color:black;
}
.bleu
{
background:blue; color:white
}
.bleu div
{
color:white;
}
.jaune
{
background:#FFD700; color:black
}
.orange
{
background:#DAA520; color:black
}
.gris
{
background:lightgray; color:black
}
.blanc
{
background:white; color:black
}

.beige
{
background:#E6E2AF; color:black
}




#####################################################

- where I put the css

getRowClass : function(record, rowIndex, p, ds){
p.cols = p.cols-1;
var content = this.bodyContent[record.id];
if(!content && !this.lazyRender){
content = this.getBodyContent(record, rowIndex);
}
if(content){
p.body = content;
}
var cssClass = this.state[record.id] ? this.rowExpandedClass : this.rowCollapsedClass;

if (this.actAsTree && eval(record.get(this.treeLeafProperty))) {
cssClass = this.leafClass;
}

var colorTable = new Array();
colorTable["1"] = "beige"; //planned
colorTable["2"] = "gris"; // waiting ressource
colorTable["3"] = "jaune"; // running
colorTable["4"] = "jaune"; // warning
colorTable["5"] = "orange"; // warningSLA
colorTable["6"] = "rouge"; // error
colorTable["7"] = "bleu"; // resolved
colorTable["8"] = "violet"; // cancelled
colorTable["10"] = "vertClair"; // late
colorTable["9"] = "vert"; // OK
colorTable["13"] = "bleuClair"; // OK
colorTable["11"] = "rouge"; // Technical error
colorTable["12"] = "vertClair"; // Late SLA
colorTable["13"] = "gris"; // Waiting dependencies
colorTable["14"] = "jaune"; // Warning dependencies
colorTable["15"] = "orange"; // Warning dependencies SLA
colorTable["16"] = "rouge"; // Error dependencies

var color = '';
if(record.get('statusListId')!= undefined && record.get('statusListId')!= null && record.get('statusListId')!= "")
color = colorTable[record.get('statusListId')];


return cssClass + " " + color;
},














I put the 2 figures of before selecting the row and after selecting the row.
The problem is that the text (after selection) turns to green (and with that background no one can read)


Thanks in advance!