C# Ext.net javascript html: Create a small colored box in label field

Question

I have this label field:

<ext:Label runat="server" ID="lblInfo" Text=" " />

I am setting the Text html property in the Command Handler of a Command Column like this:

<Command Handler="#{lblInfo}.setText('<i>100%: Perfect, 50%: Average, 0%: poor</i>');

How I can replace 100% with a green colored box, 50% with a yellow one and 0% with a red one?

Answer 1

1. Replace '100%' with html: <span style="background-color:green;padding-left: 50px;"></span>

2. Replace '50%' with html: <span style="background-color:yellow;padding-left: 50px;"></span>

3. Replace '0%' with html: <span style="background-color:red;padding-left: 50px;"></span>