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.?

Code:

---

<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>

---

Hi @arjunrvasisht,

Hopefully this example helps.
http://forums.ext.net/showthread.php...l=1#post153731

Hi Daniil,
Using the link you have sent I could set different colors for the text, But I need to set different background colors.

Hi Daniil, I could set different background color for the combox. Its working fire. But once I select a value from the drop down, I want the same background color to be set in the combobox as well. For that I have an After Render function which is not working. How do I set it.

Code:

---

<script type="text/javascript">
        var applyFilter = function (field) {
            debugger;
            // field.el.dom.style.textAlign="center";         

            var MaturityHealth = field.value;
            if (MaturityHealth == '1') {//-->Gaps - Red.
                field.el.dom.style.color = "white";
                field.el.dom.style.backgroundColor = "#FF0000";
                field.el.dom.style.backgroundImage = "none";
            }
            else if (MaturityHealth == '2') {//-->Disconnect - LightRed.
                field.el.dom.style.color = "white";
                field.el.dom.style.backgroundColor = "#FF8080";
                field.el.dom.style.backgroundImage = "none";
            }
            else if (MaturityHealth == '3') {//-->Actions - Yellow
                field.el.dom.style.color = "black";
                field.el.set().dom.style.backgroundColor = "black"; //field.el.dom.style.backgroundColor = "#FFFF00";
                field.el.dom.style.backgroundImage = "none";
            }
            else if (MaturityHealth == '4') {//-->In Place - LightGreen
                field.el.dom.style.color = "black";
                field.el.dom.style.backgroundColor = "#C2FFA3";
                field.el.dom.style.backgroundImage = "none";
            }
            else if (MaturityHealth == '5') {//-->Proven - Green
                field.el.dom.style.color = "white";
                field.el.dom.style.backgroundColor = "#008000";
                field.el.dom.style.backgroundImage = "none";
            }
            else if (MaturityHealth == '6') {//-->N/A - Grey
                field.el.dom.style.color = "black";
                field.el.dom.style.backgroundColor = "#d4d0c8";
                field.el.dom.style.backgroundImage = "none";
            }
            else {
                field.el.dom.style.color = "black";
                field.el.dom.style.backgroundColor = "black";
                field.el.dom.style.backgroundImage = "none";
            }
            field.el.dom.style.fontWeight = "bold";
        };
        </script>

---

Code:

---

        <ext:ComboBox
            ID="ComboBox1"
            runat="server"
            DisplayField="text"
            ValueField="value">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <Fields>
                                <ext:ModelField Name="value" />
                                <ext:ModelField Name="text" />
                                <ext:ModelField Name="color" />
                                <ext:ModelField Name="bgcolor" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <Listeners>
                <Select Handler="applyFilter(this)" />
                <AfterRender Handler="applyFilter(this)" />

                <%--  <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
            </Listeners>
            <ListConfig>
                <Tpl ID="Tpl1" runat="server">
                    <Html>
                        <ul class="x-list-plain">
                            <tpl for=".">
                                <li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
                                    {text}
                                </li>
                            </tpl>
                        </ul>
                    </Html>
                </Tpl>
            </ListConfig>
        </ext:ComboBox>

---

Quote:

---

But once I select a value from the drop down, I want the same background color to be set in the combobox as well.

---

I would listen to a ComboBox's Change event. Something similar is done in this example, but for setting an icon.
https://examples2.ext.net/#/Form/ComboBox/IconCombo/

You can use this code:

Code:

---

App.ComboBox1.inputEl.setStyle({
  "background-image": "none",
  "background-color": "yellow"
})

---

Thanks Daniil,
The combobox is working as expected. But I want this combobox inside a gridpanel.
Previously I had Combobox values defined using <Items> tag. And a Store for the GridPanel. On binding the Store the combobox values were also getting updated.
As per your example I have a separate store for the Combobox. How do I bind the values to that combobox inside a grid now.

Please keep one issue per thread.