Question

I want to make a square indicator that will change it color according to some sate of the application. I want to have 4 colors, red, green, blue, grey. How can I achieve this using Javascript/ExtJS/JQuery/HTML or maybe using gif image.

Is this possible with these technologies?

Or maybe some other way?

Answer 1

This is a very very basic and easy task. For a start you would need a square DIV with a certain background-color that can be changed programmatically

HTML

<div id="indicator"></div>

CSS

#indicator {
    position: relative; 
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid #dddddd;
}

Javascript/jQuery

if(...some bad condition...)
    $('#indicator').css('background-color', 'red');