HTML zebra table with Ext JS

Asked

Viewed 364 times

3

I need to do a zebra table in Extjs 4.1.2’s Xtemplate feature where I have two for loop loops. I implemented a basic HTML, but someone has some idea of how to do it?

css html extjs zebra-table

  • How are you displaying this information? Using a grid, table or Divs?

  • I am using Divs

  • 1

    in case this question would not need to be marked as Extjs, since you are using Xtemplate to display HTML and the problem is in the generation of this html...

  • I agree with @Guilherme, unless the author wants a solution using Extjs resources. If that’s the case, edit your question so we can help you better.

2 answers

5

According to that page, pair lines of a grid have the CSS class x-grid-row-alt. So, you just set in your CSS different colors for the classes x-grid-row and x-grid-row-alt:

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

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

  • In my case I’m not using css in Extjs but css in a property that uses html in the case of Xtemplate. and Reaffirming what Guilherme says.

1

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 style sheet . css

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

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

Browser other questions tagged css html extjs zebra-table

You are not signed in. Login or sign up in order to post.