PDA

View Full Version : Combobox list still selected after reset form.



SiZEg
2 Feb 2015, 3:01 AM
I have a Ext.form.ComboBox appended to Ext.form.Panel. Combo remember selection after form reset.

To reproduce:
1. Expand combobox
2. Select value
3. Run field reset() method (directly or with form reset)
4. Expand again

For example we have combo with 4 values: 1 empty, 2 red, 3 black, 4 blue. The default value is 1 combo is empty. Then we select 3 value, combo show black selected. And then decided to reset our field value. So we run reset method and combo value becomes empty again. But if we expand it, some method in ExtJS add to the 3 value class "x-boundlist-item-over" and it's looks like selected.

Do you have any solutions?

scottmartin
2 Feb 2015, 6:57 PM
It would help to see some code. Here is a quick example and it seems fine:

Tested in fiddle, select framework version:
https://fiddle.sencha.com/#home

- Alabama is default
- Entered texted in textfield, changed combo to 'Arizona'
- Clicked reset, textfield empty, combo back to 'Alabama'
- Opened combo, 'Alabama' is highlighted



var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

layout: 'anchor',
defaults: {
anchor: '100%'
},

items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
name: 'state',
value: 'AL' // default
}],

buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}],
renderTo: Ext.getBody()
});

SiZEg
2 Feb 2015, 8:48 PM
It would help to see some code. Here is a quick example and it seems fine
Thank you for you answer. It's very helpful. In fiddle, if I choose 4.2.1.883 Neptune it's all ok. But, as I'm using 4.2.2 version, I'm tring to choose 5.0.0.736 and it's allow me to reporoduce my bug.

So I'll add some modify to your code to be equivalent of mine.




var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":null, "name":" "}, // added this line
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

layout: 'anchor',
defaults: {
anchor: '100%'
},

items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
},{
xtype: 'combobox',
fieldLabel: 'State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
name: 'abbr', // change this line
value: null // change this line
}],

buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}],
renderTo: Ext.getBody()
});