[CLOSED] Ext.NET 2.1.1: Editable ComboBox Missing HiddenState If Query Equals Value
Version: 2.1.1
Not sure if this was fixed in 2.2, but since I don't have access to the SVN can't really check. ;)
To reproduce:
1. Run test page included below
2. Type in "WA" into ComboBox
3. Select "WASHINGTON" either via Tab key or mouse click
4. Click "Show Selection"
Result: "Warning Error Occurred: WASHINGTON"
To use potential fix:
1. Uncomment override script tag
2. Repeat steps above
Result: "Selected: WA"
Problem:
The getHiddenState logic is attached to the change event on the field.
The oldValue and newValue matches as oldValue is what the user typed in but not selected and the selected/new value is the value of the store record.
The reason it's failing to postback hidden state is because setValue called by select event does not fire change if the oldValue and newValue matches.
Code:
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<script runat="server">
public class State
{
public string StateID { get; set; }
public string StateName { get; set; }
}
protected void Page_Load(Object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<State> states = new List<State>()
{
new State(){ StateID = "AK", StateName="ALASKA" },
new State(){ StateID = "AL", StateName="ALABAMA" },
new State(){ StateID = "AR", StateName="ARKANSAS" },
new State(){ StateID = "AZ", StateName="ARIZONA " },
new State(){ StateID = "CA", StateName="CALIFORNIA " },
new State(){ StateID = "CO", StateName="COLORADO " },
new State(){ StateID = "CT", StateName="CONNECTICUT" },
new State(){ StateID = "DC", StateName="DISTRICT OF COLUMBIA" },
new State(){ StateID = "DE", StateName="DELAWARE" },
new State(){ StateID = "FL", StateName="FLORIDA" },
new State(){ StateID = "GA", StateName="GEORGIA" },
new State(){ StateID = "HI", StateName="HAWAII" },
new State(){ StateID = "IA", StateName="IOWA" },
new State(){ StateID = "ID", StateName="IDAHO" },
new State(){ StateID = "IL", StateName="ILLINOIS" },
new State(){ StateID = "IN", StateName="INDIANA" },
new State(){ StateID = "KS", StateName="KANSAS" },
new State(){ StateID = "KY", StateName="KENTUCKY" },
new State(){ StateID = "LA", StateName="LOUISIANA" },
new State(){ StateID = "MA", StateName="MASSACHUSETTS" },
new State(){ StateID = "MD", StateName="MARYLAND" },
new State(){ StateID = "ME", StateName="MAINE" },
new State(){ StateID = "MI", StateName="MICHIGAN" },
new State(){ StateID = "MN", StateName="MINNESOTA" },
new State(){ StateID = "MO", StateName="MISSOURI" },
new State(){ StateID = "MS", StateName="MISSISSIPPI" },
new State(){ StateID = "MT", StateName="MONTANA" },
new State(){ StateID = "NC", StateName="NORTH CAROLINA" },
new State(){ StateID = "ND", StateName="NORTH DAKOTA" },
new State(){ StateID = "NE", StateName="NEBRASKA" },
new State(){ StateID = "NH", StateName="NEW HAMPSHIRE" },
new State(){ StateID = "NJ", StateName="NEW JERSEY" },
new State(){ StateID = "NM", StateName="NEW MEXICO" },
new State(){ StateID = "NV", StateName="NEVADA" },
new State(){ StateID = "NY", StateName="NEW YORK" },
new State(){ StateID = "OH", StateName="OHIO" },
new State(){ StateID = "OK", StateName="OKLAHOMA" },
new State(){ StateID = "OR", StateName="OREGON" },
new State(){ StateID = "PA", StateName="PENNSYLVANIA" },
new State(){ StateID = "RI", StateName="RHODE ISLAND" },
new State(){ StateID = "SC", StateName="SOUTH CAROLINA" },
new State(){ StateID = "SD", StateName="SOUTH DAKOTA" },
new State(){ StateID = "TN", StateName="TENNESSEE" },
new State(){ StateID = "TX", StateName="TEXAS" },
new State(){ StateID = "UT", StateName="UTAH" },
new State(){ StateID = "VA", StateName="VIRGINIA " },
new State(){ StateID = "VT", StateName="VERMONT" },
new State(){ StateID = "WA", StateName="WASHINGTON" },
new State(){ StateID = "WI", StateName="WISCONSIN" },
new State(){ StateID = "WV", StateName="WEST VIRGINIA" },
new State(){ StateID = "WY", StateName="WYOMING" }
};
strStateList.DataSource = states;
strStateList.DataBind();
}
}
protected void btnShowSelection_DirectClick(object sender, DirectEventArgs e)
{
string value = cmbState.SelectedItem.Value;
if (value != null && value.Length != 2)
lblResult.Text = "Warning Error Occurred: " + cmbState.SelectedItem.Value;
else
lblResult.Text = "Selected: " + cmbState.SelectedItem.Value;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>State Selection Test</title>
<%--
<script type="text/javascript">
Ext.form.field.ComboBox.override({
initHiddenFieldState: function () {
if (this.useHiddenField) {
this.on("select", function () { //do on select, cause change only fires if value is different
if (this.hiddenField) {
var val = this.getHiddenState(this.getValue());
this.hiddenField.dom.value = val !== null ? val : "";
this.checkHiddenStateName();
}
else {
this.hiddenValue = this.getHiddenState(this.getValue());
}
});
}
},
initComponent: Ext.Function.createSequence(Ext.form.field.ComboBox.prototype.initComponent, function () {
this.initMerge();
if (Ext.net.ResourceMgr.isMVC) {
this.includeHiddenStateToSubmitData = !this.simpleSubmit;
}
if (!Ext.isEmpty(this.selectedItems) && this.store) {
this.setInitValue(this.selectedItems);
}
this.initHiddenFieldState();
})
});
</script>
--%>
</head>
<body>
<form id="frm" runat="server">
<ext:ResourceManager ID="rsMan" runat="server">
<Listeners>
<AjaxRequestException Handler="Ext.net.Mask.hide();" />
<BeforeAjaxRequest Handler="Ext.net.Mask.show({msg:'Please Wait'});" />
<AjaxRequestComplete Handler="Ext.net.Mask.hide();" />
</Listeners>
</ext:ResourceManager>
<ext:FormPanel ID="fp" runat="server" Title="Select State" Width="500">
<Items>
<ext:ComboBox runat="server" ID="cmbState"
FieldLabel="State" Editable="true" SelectOnFocus="false" ForceSelection="true"
QueryMode="Local" DisplayField="StateName" ValueField="StateID" AllowBlank="false" IndicatorText="*">
<Store>
<ext:Store ID="strStateList" runat="server">
<Reader>
<ext:JsonReader />
</Reader>
<Model>
<ext:Model ID="mdlStateList" runat="server" IDProperty="StateID">
<Fields>
<ext:ModelField Name="StateID" />
<ext:ModelField Name="StateName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
<ext:Button ID="btnShowSelection" runat="server" OnDirectClick="btnShowSelection_DirectClick" Text="Show Selection" />
<ext:Label ID="lblResult" runat="server" />
</Items>
</ext:FormPanel>
</form>
</body>
</html>
