如何保留组合框选定的背景颜色，内部网格面板一旦移动到下一行.或者可以说集中注意力

本文关键字：移动 一行 集中 注意力 可以说 或者 内部 组合 保留 何保留 颜色 | 更新日期: 2023-09-27 18:10:32

移动到下一行后，无法在网格面板内保留选定的背景颜色，在面板外工作正常。我想保留选择的组合框的背景颜色后，从那一行也…

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

背后的代码
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();
  }

当我们使用grid.focus(true);它在FF和chrome上工作良好，但在IE8上得到js错误:"对象不支持此属性或方法"。

任何帮助是高度赞赏提前!

如何保留组合框选定的背景颜色，内部网格面板一旦移动到下一行.或者可以说集中注意力

讨论GridPanel作为可聚焦元素是有争议的。我建议删除这一行:

grid.focus(true);

至于背景色消失的事实，这是因为GridPanel的行在编辑后被重新渲染。组合框也会被重新渲染。

作为解决方案，我可以建议为ComboBox添加这个AfterRender侦听器:

<AfterRender Handler="applyFilter(this);" />
相关文章：