PDA

View Full Version : [FIXED] [4.0.7 - 4.2.0] Combobox setValue wrong behavior after blur



chge
6 May 2013, 5:11 AM
REQUIRED INFORMATION

Ext version tested:

4.0.7
4.2.0
Browser versions tested against:

Chrome 26.0.1410.64
DOCTYPE tested against:

<!DOCTYPE html>
Description:

I have a form with a combobox. Combo has store with my custom model, also has typeAhead: true. So, user starts typing to find necessary text, but then refuses to find and clicks on the blank space of the form. Combobox restores an old value. Then user pushes "Save" button, data goes to server, then returns to client to fill form fields. At that moment, combobox remains empty!
Steps to reproduce the problem:

Start typing ahead in combobox, any prefix of word "Mobile".
Do not select "Mobile phone" item.
Click on the blank space to blur and to restore old value (nothing).
Click "set International phone" button to imitate form fields values setting after form reloading on save
The result that was expected:

Selection "International phone" item
The result that occurs instead:

Null value in combobox
Test Case:


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ExtJS Samples</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<!--<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>-->
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" >
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
</script>
</head>
<body>


<script type="text/javascript">
Ext.onReady(function(){


Ext.define('model.MarketingType', {
extend: 'Ext.data.Model',


idProperty: 'value',


fields: [
{name: 'id', type: 'int'},
{name: 'text', type: 'string'}
]
});


var bd = Ext.getBody();


var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
id: 'simpleForm',
frame: true,
title: 'Simple Form',
bodyPadding: '5 5 0',
width: 350,
items: [{
name: 'marketingType',
xtype: 'combobox',
id: 'combobreak',
valueField: 'id',
displayField: 'text',
forceSelection: true,
queryMode: 'local',
store: {
storeId: 'marketingTypes',
model: 'model.MarketingType',
data: [
{id: '4', text: 'Mobile phone'},
{id: '5', text: 'International phone'}
]
}
}, {
xtype: 'button',
text: 'set "Mobile phone"',
listeners: {
click: function() {
this.up('#simpleForm').down('#combobreak').setValue(4);
}
}
}, {
xtype: 'button',
text: 'set "International phone"',
listeners: {
click: function() {
this.up('#simpleForm').down('#combobreak').setValue(5);
}
}
}]
});


simple.render(document.body);


});
</script>


</body>
</html>


HELPFUL INFORMATION

Debugging already done:

I investigated the bug. That's because the store filters its data during typing ahead, and does not clear filtering on blur.
Possible fix:

Patching Ext code:


Ext.form.field.ComboBox.prototype.beforeBlur = function() {
this.doQueryTask.cancel();
this.store.clearFilter(); // <-- this is necessary to clear filter and restore data from snapshot
this.assertValue();
};



*EDITED BY SLEMMON
also tested in 4.1.1, 4.1.3, and 4.2.1.818

slemmon
6 May 2013, 8:07 AM
Thanks for the report! I have opened a bug in our bug tracker.