Jan 12, 2015, 6:06 AM
[CLOSED] background color for the combobox values when TypeAhead = "true".
Hi all,
I have a combobox, whose values are set with different background colors. On expanding it works absolutely fine. But when I search for some particular values on typing inside the combobox, the value will be searched but its corresponding bg color will not be set.
Please find the attached image for more details.
While using ext version 1.7, it was achieved with below piece of code:
But now am using ext 2.5, and the code has been modified like below:
Please tell me how do I check for the value condition to set the background color.
Below is the runnable test case:
I have a combobox, whose values are set with different background colors. On expanding it works absolutely fine. But when I search for some particular values on typing inside the combobox, the value will be searched but its corresponding bg color will not be set.
Please find the attached image for more details.
While using ext version 1.7, it was achieved with below piece of code:
<Template ID="erlMaturityTemplt" runat="server">
<Html>
<tpl for=".">
<div class="search-item">
<h1 style="text-align:center;padding-left:2px" class="{[values.value == -1 ? 'WhiteColor' : values.value == 1 ? 'RedColor' : values.value == 3 ? 'YellowColor': values.value == 2 ? 'RedColorLight': values.value == 4 ? 'GreenColorLight': values.value == 5 ? 'GreenColor': values.value == 6 ? 'GrayColorLight' : 'WhiteColor']}">{text}</h1>
</div>
</tpl>
</Html>
</Template>But now am using ext 2.5, and the code has been modified like below:
<ListConfig OverItemCls="setErlMaturityClass">
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[xindex == 1 ? 'WhiteColorForERLEntry' : xindex == 2 ? 'RedColorForERLEntry' : xindex == 3 ? 'RedColorLightForERLEntry': xindex == 4 ? 'YellowColorForERLEntry': xindex == 5 ? 'GreenColorLightForERLEntry': xindex == 6 ? 'GreenColorForERLEntry': xindex == 7 ? 'GrayColorLightForERLEntry' : 'WhiteColorForERLEntry']}">{field2}</div>
</Html>
</ItemTpl>
</ListConfig>Please tell me how do I check for the value condition to set the background color.
Below is the runnable test case:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
<style type="text/css">
.WhiteColorForERLEntry {
/*background-color: White;*/
color: Black;
text-align: center;
font-weight: bold;
}
.RedColorForERLEntry {
background-color: #FF0000; /* Red Color */
color: white;
text-align: center;
font-weight: bold;
}
.YellowColorForERLEntry {
background-color: #FFFF00;
color: Black; /*background-color:Green;*/
text-align: center;
font-weight: bold;
}
.RedColorLightForERLEntry {
background-color: #FF8080; /* Red Color */
color: white;
text-align: center;
font-weight: bold;
}
.GreenColorLightForERLEntry {
background-color: #C2FFA3;
color: Black;
text-align: center;
font-weight: bold;
}
.GrayColorLightForERLEntry {
background-color: #d4d0c8;
color: Black;
text-align: center;
font-weight: bold;
}
.GreenColorForERLEntry {
background-color: #008000;
color: white; /*background-color:Green;*/
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:ComboBox Flex="1" runat="server" ID="cmboErlMaturity" NoteAlign="Top"
Width="150" Selectable="true" EnableKeyEvents="true"
TypeAhead="true"
QueryMode="Local" SelectOnFocus="true" Editable="true">
<Items>
<ext:ListItem Text="--Select Maturity--" Value="-1" />
<ext:ListItem Text="Gaps" Value="1" />
<ext:ListItem Text="Disconnects" Value="2" />
<ext:ListItem Text="Actions" Value="3" />
<ext:ListItem Text="In Place" Value="4" />
<ext:ListItem Text="Proven" Value="5" />
<ext:ListItem Text="N/A" Value="6" />
</Items>
<ListConfig OverItemCls="setErlMaturityClass">
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[xindex == 1 ? 'WhiteColorForERLEntry' : xindex == 2 ? 'RedColorForERLEntry' : xindex == 3 ? 'RedColorLightForERLEntry': xindex == 4 ? 'YellowColorForERLEntry': xindex == 5 ? 'GreenColorLightForERLEntry': xindex == 6 ? 'GreenColorForERLEntry': xindex == 7 ? 'GrayColorLightForERLEntry' : 'WhiteColorForERLEntry']}">{field2}</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
</form>
</body>
</html>
Last edited by Daniil; Jan 13, 2015 at 5:12 AM.
Reason: [CLOSED]
