Setting Different background color for the Combobox values

  1. #1

    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.
  2. #2
    Hi @arjunrvasisht,

    Hopefully this example helps.
    http://forums.ext.net/showthread.php...l=1#post153731
  3. #3
    Hi Daniil,
    Using the link you have sent I could set different colors for the text, But I need to set different background colors.
  4. #4
    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.

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


            <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>
  5. #5
    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.
    http://examples2.ext.net/#/Form/ComboBox/IconCombo/

    You can use this code:
    App.ComboBox1.inputEl.setStyle({
      "background-image": "none",
      "background-color": "yellow"
    })
  6. #6
    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.
  7. #7
    Please keep one issue per thread.

Similar Threads

  1. Replies: 1
    Last Post: Jun 27, 2014, 10:52 AM
  2. [CLOSED] Setting the background color of html editor
    By SymSure in forum 2.x Premium Help
    Replies: 1
    Last Post: Sep 14, 2012, 7:30 AM
  3. [CLOSED] Combobox Field Background Color
    By cwolcott in forum 2.x Premium Help
    Replies: 3
    Last Post: May 04, 2012, 11:09 PM
  4. [CLOSED] Change color in ComboBox, depending on values
    By Jurke in forum 1.x Premium Help
    Replies: 4
    Last Post: Feb 16, 2011, 12:42 PM
  5. Replies: 2
    Last Post: Sep 17, 2009, 9:26 AM

Tags for this Thread

Posting Permissions