PDA

View Full Version : [CLOSED] background color for the combobox values when TypeAhead = "true".



arjunrvasisht
Jan 12, 2015, 6:06 AM
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.

http://forums.ext.net/attachment.php?attachmentid=18681&stc=1

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>

Since the value is being compared I was getting the background color appropriately.

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>

Here, values.value has been replaced with xindex and the xindex will always give the value as 1.
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>

Daniil
Jan 12, 2015, 7:05 AM
Hi @arjunrvasisht,

Please use

<ItemTpl runat="server">
<Html>
<div class="{[ getCssClass(App.cmboErlMaturity, values) ]}">{field2}</div>
</Html>
</ItemTpl>

var getCssClass = function(combo, values) {
var value = values[combo.valueField];

switch (value) {
case '-1' : return 'WhiteColorForERLEntry';
case '1' : return 'RedColorForERLEntry';
case '2' : return 'RedColorLightForERLEntry';
case '3' : return 'YellowColorForERLEntry';
case '4' : return 'GreenColorLightForERLEntry';
case '5' : return 'GreenColorForERLEntry';
case '6' : return 'GrayColorLightForERLEntry';
default : return 'WhiteColorForERLEntry';
}
};

arjunrvasisht
Jan 12, 2015, 8:13 AM
Hi Daniil, I tried ur code and it is working fine for the single combobox. But I have this combo inside a gridpanel. When I use this piece of code inside a gridpanel, it is not working as expected. Let me know if any property needs to be set.

Please find the code below:


<ext:GridPanel ID="GrdERLPnl" runat="server" EnableColumnMove="false" ButtonAlign="Center"
Border="true" TrackMouseOver="true" Height="580" Width="893" AutoScroll="true"
AutoWidth="false" StoreID="StoreERL" DisableSelection="true">

<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column runat="server" Header="Level 1 ERL" DataIndex="ERLName" Width="275" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="Level1ERL" />
<ext:ComponentColumn runat="server" Header="ERL Maturity" DataIndex="MaturityId" Width="150" Sortable="false"
MenuDisabled="true" ColumnID="MaturityId" Editor="true">
<%-- <Editor>--%>
<%--10-Oct-2014 AP3#1163:Sangeeta Singh --%>
<Component>

<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="ItemTpl2" runat="server">
<Html>
<div class="{[ getCssClass(App.cmboErlMaturity, values) ]}">{field2}</div>
</Html>
</ItemTpl>
<%--<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>




</Component>
<Listeners>
<%-- <Edit Fn="EditorChange"></Edit>--%>
</Listeners>
<%-- </Editor>--%>
<%-- <Renderer Fn="ErlMaturity_Render" />--%>
</ext:ComponentColumn>

<ext:Column runat="server" Align="Center" Header="ERL Maturity" DataIndex="MaturityName" Width="150" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="ErlMaturityName" Hidden="true">
<Renderer Fn="MaturityLevel_Renderer" />
</ext:Column>

<ext:ComponentColumn runat="server" Header="Remarks (80 char max)" DataIndex="Comment" Width="425" MenuDisabled="true"
Resizable="false" Sortable="false" ColumnID="ErlComments" Editor="true" AutoScroll="false" OverflowX="Hidden" OverflowY="Hidden">
<Component>
<ext:TextField ID="TxtErlComment1" runat="server" MaxLength="80" EnforceMaxLength="true" Grow="false" MaskRe="[^<>]" OverflowX="Hidden" OverflowY="Hidden"
Height="21" EnableKeyEvents="true" RowSpan="0" EmptyText="Insert remarks here..." AutoScroll="false" PreventScrollbars="true">
<Listeners>
<KeyPress Fn="DisableKeyPress" />
<SpecialKey Fn="PreventEscape" PreventDefault="true" />
</Listeners>
</ext:TextField>
</Component>
</ext:ComponentColumn>

<ext:Column runat="server" Header="Remarks (80 char max)" DataIndex="Comment" Width="425" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="ErlCommentsLabel" Hidden="true">
</ext:Column>

</Columns>
</ColumnModel>
<%-- <Plugins>
<ext:EditableGrid ID="EGridErl" runat="server" />
</Plugins>--%>

<View>
<ext:GridView ID="grdViewErl" runat="server" MarkDirty="false" StripeRows="false" TrackOver="false">
<Listeners>
<BeforeRefresh Handler="this.panel.hide();" />

</Listeners>
</ext:GridView>
</View>

</ext:GridPanel>

Daniil
Jan 12, 2015, 8:26 AM
ID is ignored for a ComponentColumn's Component.

You can replace

var value = values[combo.valueField];
with

var value = values.field1;

arjunrvasisht
Jan 12, 2015, 9:06 AM
Hi Daniil,
I did the changes u have mentioned but it is still not working.
Can u pls give me a workable sample. A combobox inside a gridpanel with all the customization.

Daniil
Jan 12, 2015, 9:37 AM
Please provide a runnable test case.

arjunrvasisht
Jan 12, 2015, 10:17 AM
Hi Daniil,
Please find the runnable test code below:


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { 1, 1, "Text 1", DateTime.Now.Date },
new object[] { 2, 2, "Text 2", DateTime.Now.Date },
new object[] { 3, 3, "Text 3", DateTime.Now.Date },
new object[] { 4, 4, "Text 4", DateTime.Now.Date },
new object[] { 5, 5, "Text 5", DateTime.Now.Date },
new object[] { 6, 6, "Text 6", DateTime.Now.Date },
new object[] { 7, 7, "Text 7", DateTime.Now.Date },
new object[] { 8, 8, "Text 8", DateTime.Now.Date },
new object[] { 9, 9, "Text 9", DateTime.Now.Date }
};

this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<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>
<script type="text/javascript">
var getCssClass = function (combo, values) {
//var value = values[combo.valueField];
var value = values.field1;
switch (value) {
case '-1': return 'WhiteColorForERLEntry';
case '1': return 'RedColorForERLEntry';
case '2': return 'RedColorLightForERLEntry';
case '3': return 'YellowColorForERLEntry';
case '4': return 'GreenColorLightForERLEntry';
case '5': return 'GreenColorForERLEntry';
case '6': return 'GrayColorLightForERLEntry';
default: return 'WhiteColorForERLEntry';
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ComponentColumn ID="ComponentColumn1"
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField ID="NumberField1" runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox ID="ComboBox1" runat="server" Flex="1" NoteAlign="Top"
Width="150" Selectable="true" EnableKeyEvents="true"
TypeAhead="true"
QueryMode="Local" SelectOnFocus="true" ForceSelection="true">
<Items>
<ext:ListItem Text="A" Value="1" Mode="Raw" />
<ext:ListItem Text="B" Value="2" Mode="Raw" />
<ext:ListItem Text="C" Value="3" Mode="Raw" />
<ext:ListItem Text="D" Value="4" Mode="Raw" />
<ext:ListItem Text="E" Value="5" Mode="Raw" />
<ext:ListItem Text="F" Value="6" Mode="Raw" />
<ext:ListItem Text="G" Value="7" Mode="Raw" />
<ext:ListItem Text="H" Value="8" Mode="Raw" />
<ext:ListItem Text="I" Value="9" Mode="Raw" />
</Items>
<ListConfig OverItemCls="setErlMaturityClass">
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[getCssClass(App.cmboErlMaturity, values)]}">{field2}</div>
<%--<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>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn3"
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField ID="TextField1" runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn ID="ComponentColumn4"
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField ID="DateField1" runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Jan 12, 2015, 11:59 AM
You set Mode="Raw" for the ListItems. So, there is now integers and you should change the getCssClass function accordingly replacing

case '-1'
with

case -1
and so on.

arjunrvasisht
Jan 12, 2015, 12:28 PM
Thanks Daniil, it is working fine.
But the code snippet I had given was of a POC i had created. All the changes which u have mentioned in those code blocks have been done in my project also. But still on clicking the drop down icon the values are not loading at all. Below is the code from the actual project. Can u please go thru once and let me know if I am missing any properties or if I have done any other mistakes pls. On typing inside the combo, I have a break point set at "getCssClass" function call to check the values coming. The break point hits in the POC but it is not hitting in my project.
Below is my code block :


<ext:Store ID="StoreERL" runat="server">
<Model>
<ext:Model IDProperty="Tier3Id" runat="server">
<Fields>
<ext:ModelField Name="ERLMetricId" Type="String" />
<ext:ModelField Name="ERLId" Type="Int" />
<ext:ModelField Name="ERLName" Type="String" />
<ext:ModelField Name="MaturityId_Copy" Type="String" />
<ext:ModelField Name="MaturityId" Type="String" />
<ext:ModelField Name="Comment_Copy" Type="String" />
<ext:ModelField Name="Comment" Type="String" />
<ext:ModelField Name="MaturityName" Type="String" />
<ext:ModelField Name="ColorName" Type="String" />
</Fields>
</ext:Model>
</Model>

</ext:Store>
<ext:GridPanel ID="GrdERLPnl" runat="server" EnableColumnMove="false" ButtonAlign="Center"
Border="true" TrackMouseOver="true" Height="580" Width="893" AutoScroll="true"
AutoWidth="false" StoreID="StoreERL" DisableSelection="true">

<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column runat="server" Header="Level 1 ERL" DataIndex="ERLName" Width="275" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="Level1ERL" />
<ext:ComponentColumn runat="server" Header="ERL Maturity" DataIndex="MaturityId" Width="150" Sortable="false"
MenuDisabled="true" ColumnID="MaturityId" Editor="true">
<%-- <Editor>--%>
<%--10-Oct-2014 AP3#1163:Sangeeta Singh --%>
<Component>
<ext:ComboBox Flex="1" runat="server" ID="cmboErlMaturity" NoteAlign="Top"
Width="150" Selectable="true" EnableKeyEvents="true"
TypeAhead="true"
QueryMode="Local" SelectOnFocus="true" ForceSelection="true">
<Items>
<%--<ext:Tag Index="1" Text="Arjun" Style="" IconCls="check" Cls="check"></ext:Tag>--%>
<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>

<Listeners>
<%--<Expand Fn="EditorChange" ></Expand>--%>
<%-- <Render Handler="applyFilter(this,#{cmboErlMaturity})"></Render>--%>
<AfterRender Handler="applyFilter(this,#{StoreERL})" />
<Select Handler="applyFilter(this,#{StoreERL})" />

<%--<BeforeRender Handler="applyFilter(this)" ></BeforeRender>--%>
<%--<SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
</Listeners>
<%-- <template id="erlMaturityTemplt" runat="server">--%>
<ListConfig OverItemCls="setErlMaturityClass">
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[getCssClass(App.cmboErlMaturity, values)]}">{field2}</div>
<%--<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>

<%--</template>--%>
</ext:ComboBox>
</Component>
<Listeners>
<%-- <Edit Fn="EditorChange"></Edit>--%>
</Listeners>
<%-- </Editor>--%>
<%-- <Renderer Fn="ErlMaturity_Render" />--%>
</ext:ComponentColumn>

<ext:Column runat="server" Align="Center" Header="ERL Maturity" DataIndex="MaturityName" Width="150" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="ErlMaturityName" Hidden="true">
<Renderer Fn="MaturityLevel_Renderer" />
</ext:Column>

<ext:ComponentColumn runat="server" Header="Remarks (80 char max)" DataIndex="Comment" Width="425" MenuDisabled="true"
Resizable="false" Sortable="false" ColumnID="ErlComments" Editor="true" AutoScroll="false" OverflowX="Hidden" OverflowY="Hidden">
<Component>
<ext:TextField ID="TxtErlComment1" runat="server" MaxLength="80" EnforceMaxLength="true" Grow="false" MaskRe="[^<>]" OverflowX="Hidden" OverflowY="Hidden"
Height="21" EnableKeyEvents="true" RowSpan="0" EmptyText="Insert remarks here..." AutoScroll="false" PreventScrollbars="true">
<Listeners>
<KeyPress Fn="DisableKeyPress" />
<SpecialKey Fn="PreventEscape" PreventDefault="true" />
</Listeners>
</ext:TextField>
</Component>
</ext:ComponentColumn>

<ext:Column runat="server" Header="Remarks (80 char max)" DataIndex="Comment" Width="425" Sortable="false"
MenuDisabled="true" Css="text-align:left;word-break:break-all;" ColumnID="ErlCommentsLabel" Hidden="true">
</ext:Column>

</Columns>
</ColumnModel>
<%-- <Plugins>
<ext:EditableGrid ID="EGridErl" runat="server" />
</Plugins>--%>

<View>
<ext:GridView ID="grdViewErl" runat="server" MarkDirty="false" StripeRows="false" TrackOver="false">
<Listeners>
<BeforeRefresh Handler="this.panel.hide();" />

</Listeners>
</ext:GridView>
</View>

</ext:GridPanel>


And this is where I have defined the javascript function:


<script type="text/javascript">
function PreventEscape(el, e) {
e = e || window.event;
var keycode = e.which || e.keyCode;
if (keycode == e.ESC || keycode == e.ENTER) {
e.keyCode = null;
e.cancel = true;
e.returnValue = false;
e.stopEvent();
}
}

function fixComboArrow(field) {
if (navigator.userAgent.indexOf('MSIE 7.0') != -1) {
$('#' + field).css('padding-top', '0px');
$('#' + field).css('padding-bottom', '0px');
$('#' + field).css('margin-top', '0px');
$('#' + field).css('margin-bottom', '0px');
$('#' + field).css('height', '20px');
}
}

var ResetCofirmation = function() {
return confirm('All the data on the form would be reset to the last saved state. Do you want to continue?');
}

var getCssClass = function(combo, values) {
var value = values[combo.valueField];

switch (value) {
case '-1' : return 'WhiteColorForERLEntry';
case '1' : return 'RedColorForERLEntry';
case '2' : return 'RedColorLightForERLEntry';
case '3' : return 'YellowColorForERLEntry';
case '4' : return 'GreenColorLightForERLEntry';
case '5' : return 'GreenColorForERLEntry';
case '6' : return 'GrayColorLightForERLEntry';
default : return 'WhiteColorForERLEntry';
}
};
</script>

Please help.!!! I need this to be fixed very urgently.!

Daniil
Jan 12, 2015, 1:56 PM
Should you not replace this with something?

var value = values[combo.valueField];

arjunrvasisht
Jan 13, 2015, 3:21 AM
Hi Daniil,

Even after changing that to "var value = values.field1; it is not working.

Daniil
Jan 13, 2015, 4:39 AM
It is difficult to say what is going wrong without having a test case to reproduce.

You can start from the page where it is reproducible and simplifying the code step by step.
How to prepare a sample (http://forums.ext.net/showthread.php?13672&p=56687&viewfull=1#post56687)

arjunrvasisht
Jan 13, 2015, 4:51 AM
Hi Daniil,
Problem got solved.!!
The problem was, in the project at page level we are setting Namespace=" " in ext:ResourceManger. That's why in the getCssClass function App.combobox was not firing. Now I have set the Namespace in the control level and it is working as expected.
Thanks again, the thread can be closed :)


<ext:ComboBox ID="ComboBox1" runat="server" Flex="1" NoteAlign="Top"
Width="150" Selectable="true" EnableKeyEvents="true"
TypeAhead="true"
QueryMode="Local" SelectOnFocus="true" ForceSelection="true" Namespace="App">


<ext:ResourceManager ID="ResourceManager2" runat="server" ShowWarningOnAjaxFailure="false" Namespace="" />