How to retain combobox selected background color, inside grid panel once move to next row..or can say focus out?
Question
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...
<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".
Any help is highly appreciated in advance!
1 answers
solution1
0 ACCPTED 2014-06-27 10:50:36
It is controversial to talk about a GridPanel as a focusable element. I would recommend to remove this line:
grid.focus(true);
As for the fact that the background-color disappears, it is because of a GridPanel's row is re-rendered after editing. A ComboBox is re-rendered as well.
As a solution, I can suggest to add this AfterRender listener for the ComboBox:
<AfterRender Handler="applyFilter(this);" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Change Background color of grid row when selected
How can I move focus to next field after enterd previous field without click on new field retain keyboard in Xamarin PCL project?
can't figure out how to return the selected row of grid in ModalDialog
Changing Background color when a grid row is selected in windows phone
Change Grid Background Color Inside Listview when Selected
How to change row/column background color in Grid?
How to change background color of stack panel when selected in datagrid
How to change the background color of a selected ComboBox item? uwp
How to move focus with in columns inside one grid cell
Focus does not move to next new row in grid view when press tab key
Related Tags