PDA

View Full Version : By resetting a form, the editable combobox is always reset to empty



Qtx
30 May 2011, 8:17 AM
If the original value of the combobox is not empty, the following happens:

- If you change the value by means of a selection, by resetting of the form, the original value is correctly restored.

- If you change the value by means of editing, by resetting of the form, the original value is set to empty.

In ExtJS 3, it was correct.

How to reproduce. I have modified the code of the example form/field-types.js. I added an editable combobox and the button 'reset'. The combobox has a non empty value per default - Germany.

Select another value of the combobox and push 'reset', the value is restored to Germany.

Edit the value of the combobox and push 'reset', the value is set to empty.


Ext.require([
'Ext.form.*'
]);

Ext.onReady(function() {

var countries = [
['DE', 'Germany'],
['RU', 'Russia'],
['FR', 'France']
];

var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,

fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},

items: [
{
xtype: 'combo',
fieldLabel: 'Country',
id: 'country',
name: 'country',
store: countries,
value: 'DE',

triggerAction: 'all',
forceSelection: false,
editable: true,
typeAhead: true,
selectOnFocus: true
},{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
}, {
xtype: 'displayfield',
name: 'displayfield1',
fieldLabel: 'Display field',
value: 'Display field <span style="color:green;">value</span>'
}, {
xtype: 'numberfield',
name: 'numberfield1',
fieldLabel: 'Number field',
value: 5,
minValue: 0,
maxValue: 50
}, {
xtype: 'checkboxfield',
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: 'box label'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
}, {
xtype: 'datefield',
name: 'date1',
fieldLabel: 'Date Field'
}, {
xtype: 'timefield',
name: 'time1',
fieldLabel: 'Time Field',
minValue: '1:30 AM',
maxValue: '9:15 PM'
}],

buttons: [
{
text: 'Reset',
handler: function () { formPanel.getForm().reset(); }
}
]

});

formPanel.render('form-ct');

});

Qtx
30 May 2011, 9:58 PM
The second similar issue. Setting the editable combobox to a value that is not in the list, results in empty value of this combobox although force selection is false.

forms/field-types.js


Ext.require([
'Ext.form.*'
]);

Ext.onReady(function() {

var countries = [
['DE', 'Germany'],
['RU', 'Russia'],
['FR', 'France']
];

var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,

fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},

items: [
{
xtype: 'combo',
fieldLabel: 'Country',
id: 'country',
name: 'country',
store: countries,
value: 'DE',

triggerAction: 'all',
forceSelection: false,
editable: true,
typeAhead: true,
selectOnFocus: true
},{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
}, {
xtype: 'displayfield',
name: 'displayfield1',
fieldLabel: 'Display field',
value: 'Display field <span style="color:green;">value</span>'
}, {
xtype: 'numberfield',
name: 'numberfield1',
fieldLabel: 'Number field',
value: 5,
minValue: 0,
maxValue: 50
}, {
xtype: 'checkboxfield',
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: 'box label'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
}, {
xtype: 'radiofield',
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
}, {
xtype: 'datefield',
name: 'date1',
fieldLabel: 'Date Field'
}, {
xtype: 'timefield',
name: 'time1',
fieldLabel: 'Time Field',
minValue: '1:30 AM',
maxValue: '9:15 PM'
}],

buttons: [
{
text: 'Set',
handler: function () {
var f = formPanel.getForm().findField('country');

f.setValue('90000');
}
},
{
text: 'Reset',
handler: function () { formPanel.getForm().reset(); }
}
]

});

formPanel.render('form-ct');

});

Qtx
31 May 2011, 12:50 AM
I found the bugs, here is the code with correction. The bug is in the method setValue. When setting to a value which occurs in the list of selections, following is done

record = me.findRecordByValue(record);

But the search is done in the filtered store and thus nothing is found although this value exists in the store.



Ext.override(Ext.form.field.ComboBox, {

setValue: function(value, doSelect) {
var me = this,
valueNotFoundText = me.valueNotFoundText,
inputEl = me.inputEl,
i, len, record,
models = [],
displayTplData = [],
processedValue = [];

if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
me.value = value;
return me;
}

// This method processes multi-values, so ensure value is an array.
value = Ext.Array.from(value);

// Loop through values
for (i = 0, len = value.length; i < len; i++) {
record = value[i];
if (!record || !record.isModel) {
this.store.clearFilter(false);
record = me.findRecordByValue(record);
}
// record found, select it.
if (record) {
models.push(record);
displayTplData.push(record.data);
processedValue.push(record.get(me.valueField));
}
// record was not found, this could happen because
// store is not loaded or they set a value not in the store
else {
// if valueNotFoundText is defined, display it, otherwise display nothing for this value
if (Ext.isDefined(valueNotFoundText)) {
displayTplData.push(valueNotFoundText);
}
displayTplData.push(value[i]);
processedValue.push(value[i]);
}
}

// Set the value of this field. If we are multiselecting, then that is an array.
me.value = me.multiSelect ? processedValue : processedValue[0];
if (!Ext.isDefined(me.value)) {
me.value = null;
}
me.displayTplData = displayTplData; //store for getDisplayValue method
me.lastSelection = me.valueModels = models;

if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
}

// Calculate raw value from the collection of Model data
me.setRawValue(me.getDisplayValue());
me.checkChange();

if (doSelect !== false) {
me.syncSelection();
}
me.applyEmptyText();

return me;
}

});

SebTardif
15 Jul 2011, 8:04 AM
Is this fixed in Ext JS 4.0.2a ?

daleedom
17 Aug 2011, 5:56 PM
Is this fixed in Ext JS 4.0.2a ?


NO. :(