Nov 17, 2014, 10:00 AM
Setting Different background color for the Combobox values
I have a column of combox inside a gridpanel. I had set different background color for each values inside combox in EXT .net 1.1. Now I have migrated the code from 1.1 to ext 2.5 and also made the changes looking at Breaking changes. But the color is not being set now. Please check the below code and let me know what properties am I missing.?
<ext:Store ID="StoreERL" runat="server">
<Model>
<ext:Model 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="530" Width="893" AutoScroll="true"
AutoWidth="false" StoreID="StoreERL">
<%--DisableSelection="true">--%>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column runat="server" Text="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" Text="ERL Maturity" DataIndex="MaturityId" Width="150" Sortable="false"
MenuDisabled="true" Flex="1" Editor="false">
<Component>
<ext:ComboBox Flex="1" runat="server" ID="cmboErlMaturity" NoteAlign="Top"
Width="150" Selectable="true" EnableKeyEvents="true" SelectedCls="setErlMaturityClass"
TypeAhead="false" ForceSelection="true" StyleSpec="text-align: center;"
SelectOnFocus="true" ItemSelector="div.search-item" >
<Items>
<ext:ListItem Text="--Select Maturity--" Value="-1" Mode="Raw" />
<ext:ListItem Text="Gaps " Value="1" Mode="Raw" />
<ext:ListItem Text="Disconnects " Value="2" Mode="Raw" />
<ext:ListItem Text="Actions " Value="3" Mode="Raw" />
<ext:ListItem Text="In place " Value="4" Mode="Raw" />
<ext:ListItem Text="Proven " Value="5" Mode="Raw" />
<ext:ListItem Text="N/A " Value="6" Mode="Raw" />
</Items>
<Listeners>
<%--<Select Handler="applyFilter(this)" />
<AfterRender Handler="applyFilter(this)" />--%>
<SpecialKey Fn="PreventEscape" PreventDefault="true" />
</Listeners>
<%--<SelectedItems>
<ext:ListItem Index="0"></ext:ListItem>
</SelectedItems>--%>
<ListConfig>
<ItemTpl ID="Tpl1" 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>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
</Component>
<%-- <Renderer Fn="ErlMaturity_Render" />--%>
</ext:ComponentColumn>
<ext:Column runat="server" Text="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">
<Component>
<ext:TextArea ID="TxtErlComment" runat="server" MaxLength="80" Grow="false" MaskRe="[^<>]"
StyleSpec="overflow-x:hidden; overflow-y:hidden" Height="21" EnableKeyEvents="true" EmptyText="Insert remarks here...">
<Listeners>
<KeyPress Fn="DisableKeyPress" />
<SpecialKey Fn="PreventEscape" PreventDefault="true" />
</Listeners>
</ext:TextArea>
</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>
<View>
<ext:GridView ID="grdViewErl" runat="server" MarkDirty="false" />
</View>
</ext:GridPanel>
Last edited by Daniil; Nov 20, 2014 at 5:26 AM.