May 30, 2016, 10:56 PM
[FIXED] [#1339] [4.1.0] ComboBox with DisplayTpl cleared when losing focus in 4.1
Hi,
The 4.1 release may have introduced a problem with ComboBoxes using DisplayTpl. When selecting a value from the dropdown, the behaviour is correct, but if you tab onto and then away from a ComboBox that has a DisplayTpl, the value is cleared. This was not a problem with 4.0.
In the following code, if you select a value for the ComboBox and then tab away, the value remains (as it should). If you then tab back to the ComboBox and then away without changing the value in the ComboBox, it will be cleared.
The 4.1 release may have introduced a problem with ComboBoxes using DisplayTpl. When selecting a value from the dropdown, the behaviour is correct, but if you tab onto and then away from a ComboBox that has a DisplayTpl, the value is cleared. This was not a problem with 4.0.
In the following code, if you select a value for the ComboBox and then tab away, the value remains (as it should). If you then tab back to the ComboBox and then away without changing the value in the ComboBox, it will be cleared.
<%@ Page Language="C#" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] { "AL", "Alabama", "The Heart of Dixie", 5.99},
new object[] { "AK", "Alaska", "The Land of the Midnight Sun", 5.99},
new object[] { "AZ", "Arizona", "The Grand Canyon State", 5.99},
new object[] { "AR", "Arkansas", "The Natural State", 5.99},
};
}
</script>
<html>
<head runat="server">
<script src="../Content/JS/ExtjsUsefulStuff.js?NoCache=ok"></script>
<title>Comboboxes - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.list-item {
font: normal 11px tahoma, arial, helvetica, sans-serif;
padding: 3px 10px 3px 10px;
border: 1px solid #fff;
border-bottom: 1px solid #eeeeee;
white-space: normal;
color: #555;
}
.list-item h3 {
display: block;
font: inherit;
font-weight: bold;
margin: 0px;
color: #222;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
runat="server"
Width="250"
Editable="false"
DisplayField="state"
ValueField="abbr"
QueryMode="Local"
ForceSelection="true"
TriggerAction="All"
EmptyText="Select a state...">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
<ext:ModelField Name="price" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl runat="server">
<Html>
<div class="list-item">
<h3>{state}</h3>
{nick:ellipsis(15)}, {price:usMoney}
</div>
</Html>
</ItemTpl>
</ListConfig>
<DisplayTpl runat="server">
<Html>
<tpl for=".">
{state} {nick:ellipsis(15)}, {price:usMoney}
</tpl>
</Html>
</DisplayTpl>
</ext:ComboBox>
<ext:TextField runat="server" />
</form>
</body>
</html>
I have used the following workaround, but I'm not sure if it will cause other problems (the only change is the if statement in line 22):Ext.define('Override.Ext.form.field.ComboBox', {
override: 'Ext.form.field.ComboBox',
setValue: function (value) {
var me = this,
bind, valueBind;
if (me.hasFocus) {
bind = me.getBind();
valueBind = bind && bind.value;
if (valueBind && valueBind.syncing) {
if ((Ext.isEmpty(value) && Ext.isEmpty(me.value)) || value === me.value) {
return me;
} else if (Ext.isArray(value) && Ext.isArray(me.value) && Ext.Array.equals(value, me.value)) {
return me;
}
}
} else {
// add this if statement so lastSelectedRecords is only cleared when value is null
if (value === null) me.lastSelectedRecords = null;
}
if (value != null) {
me.doSetValue(value);
}
else {
me.suspendEvent('select');
me.valueCollection.beginUpdate();
me.pickerSelectionModel.deselectAll();
me.valueCollection.endUpdate();
me.resumeEvent('select');
}
return me;
}
});
Last edited by fabricio.murta; Jan 05, 2017 at 11:33 PM.