How to retain combobox selected background color, inside grid panel once move to next row..or can say focus out?

  1. #1

    How to retain combobox selected background color, inside grid panel once move to next row..or can say focus out?

    Unable to retain the selected background color inside grid panel once move to next row..its working fine outside the panel.I want to retain the combo-box selected background color after moving from that row also...

    Sample Code
     <ext:XScript ID="XScriptdd1" runat="server">
     <script type="text/javascript">
    var applyFilter = function(field, grid) {
    
                    var c = field.value;
                    if (c == '1') {
                        field.el.dom.style.backgroundColor = "#ff0000";
                        field.el.dom.style.backgroundImage = "none";
                    } else if (c == '2') {
                        field.el.dom.style.backgroundColor = "#FF8080";
                        field.el.dom.style.backgroundImage = "none";
                    } else if (c == '3') {
                        field.el.dom.style.backgroundColor = "Yellow";
                        field.el.dom.style.backgroundImage = "none";
                    } else if (c == '4') {
                        field.el.dom.style.backgroundColor = "#C2FFA3";
                        field.el.dom.style.backgroundImage = "none";
                    } else if (c == '5') {
                        field.el.dom.style.backgroundColor = "Green";
                        field.el.dom.style.backgroundImage = "none";
                    } else if (c == '6') {
                        field.el.dom.style.backgroundColor = "Gray";
                        field.el.dom.style.backgroundImage = "none";
                    } else {
                        field.el.dom.style.backgroundColor = "white";
                        field.el.dom.style.backgroundImage = "none";
                    }
    
                   grid.focus(true);
    
                };
           
    
            </script>
        </ext:XScript>
    
     <ext:GridPanel ID="GrrdERLPnl" runat="server" EnableColumnMove="false" ButtonAlign="Center"
            Border="true" TrackMouseOver="true" Height="500" Width="900" AutoScroll="true"
            AutoWidth="false" Padding="20">
            <Store>
                <ext:Store ID="StoreERL" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="category" Type="String" />
                                <ext:RecordField Name="ComboField" Type="int" />
                                <ext:RecordField Name="comments" Type="String" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <Plugins>
                <ext:EditableGrid ID="EditableGrid1" runat="server" />
            </Plugins>
            <ColumnModel ID="ColumnModel1" runat="server">
                <Columns>
                    <ext:Column Header="Level 1 ERL" DataIndex="category" Width="350" Align="Center" />
                    <ext:Column Header="ERL Maturity" DataIndex="ComboField" Width="250" Align="Center">
                        <Editor>
                            <ext:ComboBox Flex="1" runat="server" ID="cmboErlMaturity" NoteAlign="Top" ItemSelector="div.search-item"
                                Width="150" Height="100" TriggerAction="All" >
                                <Items>
                                    <ext:ListItem Text="Select Maturity " Value="0" />
                                    <ext:ListItem Text="A " Value="1" />
                                    <ext:ListItem Text="B " Value="2" />
                                    <ext:ListItem Text="C " Value="3" />
                                    <ext:ListItem Text="D " Value="4" />
                                    <ext:ListItem Text="E " Value="5" />
                                    <ext:ListItem Text="N/A " Value="6" />
                                </Items>
                                <Listeners>
                                    <Select Handler="applyFilter(this,#{GrrdERLPnl})" />
                                    <%--<Change Handler ="applyFilter(this,#{GrrdERLPnl})" />--%>
                                </Listeners>
                                <Template runat="server">
                                    <Html>
                                    <tpl for="."> 
                                            <div class="search-item">             
                                                <h1 style="text-align:center;  background-color:{[values.value == 0 ? 'white' : values.value == 1 ? 'Red' : values.value == 3 ? 'Yellow': values.value == 2 ? '#FF8080': values.value == 4 ? '#C2FFA3': values.value == 5 ? 'Green': values.value == 6 ? 'Gray' : 'black']}">{text}</h1>
                                           </div>
                                          </tpl>
                                    </Html>
                                </Template>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Comments" DataIndex="comments" Width="250" Align="Center">
                    </ext:Column>
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
    
    ---@ Code Behind---
    
    
        private object[] Data
        {
            get
            {
                return new object[]
                    {
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Technical Requirements", 0, "Comments to test" },
                        new object[] { "Statemenet of Work", 0, "Comments to test1" }
                       
                    };
            }
        }
    
        private void BindData()
        {
            var store = this.GrrdERLPnl.GetStore();
    
            store.DataSource = this.Data;
            store.DataBind();
        }
    Once we set focus on grid with grid.focus(true);
    Its working fine on FF and chrome but on IE8 getting js error: "Object doesn't support this property or method".

    Please help
  2. #2
    Hi @Prasson,

    I saw you've posted the same question on StackOverflow.
    http://stackoverflow.com/questions/2...ve-to/24450017

    I have answered there.

Similar Threads

  1. Replies: 18
    Last Post: Mar 13, 2013, 10:40 AM
  2. Replies: 3
    Last Post: Mar 13, 2013, 8:39 AM
  3. Replies: 13
    Last Post: Feb 28, 2013, 2:06 PM
  4. Replies: 1
    Last Post: Feb 24, 2012, 5:39 AM
  5. Replies: 0
    Last Post: Sep 27, 2011, 10:24 AM

Tags for this Thread

Posting Permissions