Zebraed Table in HTML with Ext JS

Question

Zebraed Table in HTML with Ext JS

Navigation

#1 by (5 votes)
#2 by (1 votes)

3

I need to make a zebrada table in the Xtemplate functionality of ExTJS 4.1.2 where I have two for loop. I implemented a basic HTML, but does anyone have any idea how to do it?

html css extjs tabela-zebrada

asked by anonymous 17.12.2013 / 20:43

2 answers

Is there a Parallax Mousemove effect for jQuery? How to save an XLSX (Excel) file instead of CSV?

score 5 · Answer 1

According to this page , even rows of a grid have the class CSS x-grid-row-alt . So, you just have to define different colors for the x-grid-row and x-grid-row-alt classes in your CSS:

x-grid-row .x-grid-cell { 
    background-color: #fff; 
    color: #000; 
} 

.x-grid-row-alt .x-grid-cell { 
    background-color: #000; 
    color: #fff; 
}

score 1 · Answer 2

I imagine there are more elegant ways, using a table, or a grid, but in case you are generating the list through a for / foreach, you can

    for ($i=0;$row[$i];$i++){
        if ($i %  2  !=  0){//estou apenas verificando se é uma div par
            echo"<div class='dark'> ... <\div>";
        }esle{
            echo"<div class='light'> ... <\div>";
        }  
    }

And in the .css style sheet

.dark { 
    background-color: #fff; 
    color: #000; 
} 

.light { 
    background-color: #000; 
    color: #fff; 
}