PDA

View Full Version : [FIXED] Select loses currently selected option after cancel



jlscott3
1 Aug 2011, 6:43 AM
Crossposted from here (http://www.sencha.com/forum/showthread.php?140950-Select-losing-currently-selected-after-cancel)- sorry if that's a faux pas but the behavior appears to be a bug.


The picker for an Ext. form.Select will not show the correct value under the following steps on iOS 4.3.3 on an iPhone or iPod Touch:

1. Load a view that contains a Select which has something other than the first value in the list selected. For this example, let's say the Select contains Option 1, Option 2 and Option 3. Option 2 is selected.
2. Tap the select to raise the picker. Picker appears with Option 2 selected. OK
3. Tap the cancel button - picker disappears. OK
4. Tap the select again - picker appears with the Option 1 selected. WRONG - Option 2 should be selected.


Modified code for kitchensink\src\demos\forms.js to produce the issue (changes are in red):



demos.Forms = new Ext.TabPanel({
items: [{
title: 'Basic',
xtype: 'form',
id: 'basicform',
scroll: 'vertical',
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
// labelAlign: 'right'
labelWidth: '35%'
},
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name',
placeHolder: 'Tom Roy',
autoCapitalize : true,
required: true,
useClearIcon: true
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password',
useClearIcon: true
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email',
placeHolder: 'me@sencha.com',
useClearIcon: true
}, {
xtype: 'urlfield',
name: 'url',
label: 'Url',
placeHolder: 'http://sencha.com',
useClearIcon: true
}, {
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool'
}, {
xtype: 'datepickerfield',
name: 'birthday',
label: 'Birthday',
picker: { yearFrom: 1900 }
}, new Ext.form.Select ({
xtype: 'selectfield',
name: 'rank',
label: 'Rank',
options: [{
text: 'Master',
value: 'master'
}, {
text: 'Journeyman',
value: 'journeyman'
}, {
text: 'Apprentice',
value: 'apprentice'
}]
}).setValue('journeyman'), {
xtype: 'hiddenfield',
name: 'secret',
value: false
}, {
xtype: 'textareafield',
name: 'bio',
label: 'Bio'
}]
}, {
xtype: 'fieldset',
title: 'Favorite color',
defaults: {
xtype: 'radiofield',
labelWidth: '35%'
},
items: [{
name: 'color',
value: 'red',
label: 'Red'
}, {
name: 'color',
label: 'Blue',
value: 'blue'
}, {
name: 'color',
label: 'Green',
value: 'green'
}, {
name: 'color',
label: 'Purple',
value: 'purple'
}]
}, {
layout: 'vbox',
defaults: {xtype: 'button', flex: 1, style: 'margin: .5em;'},
items: [{
text: 'Disable fields',
scope: this,
hasDisabled: false,
handler: function(btn){
var form = Ext.getCmp('basicform');

if (btn.hasDisabled) {
form.enable();
btn.hasDisabled = false;
btn.setText('Disable fields');
} else {
form.disable();
btn.hasDisabled = true;
btn.setText('Enable fields');
}
}
}, {
text: 'Reset form',
handler: function(){
Ext.getCmp('basicform').reset();
}
}]
}]
}, {
title: 'Sliders',
xtype: 'form',
items: [{
xtype: 'fieldset',
defaults: {
labelAlign: 'right'
},
items: [{
xtype: 'sliderfield',
name: 'value',
label: 'Value'
}, {
xtype: 'togglefield',
name: 'enable',
label: 'Enable'
}]
}]
}, {
title: 'Toolbars',
styleHtmlContent: true,
xtype: 'form',
scroll: 'vertical',
html: "A human being should be able to change a diaper, plan an invasion, butcher a hog, conn a ship, design a building, write a sonnet, balance accounts, build a wall, set a bone, comfort the dying, take orders, give orders, cooperate, act alone, solve equations, analyze a new problem, pitch manure, program a computer, cook a tasty meal, fight efficiently, die gallantly. - RAH",
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'searchfield',
placeHolder: 'Search',
name: 'searchfield'
}]
},
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'textfield',
placeHolder: 'Text',
name: 'searchfield'
}]
},
{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'selectfield',
name: 'options',
options: [
{text: 'This is just a big select', value: '1'},
{text: 'Another select item', value: '2'}
]
}]
}]
}]
});



// if (Ext.is.Android) {
// demos.Forms.insert(0, {
// xtype: 'component',
// styleHtmlContent: true,
// html: '<span style="color: red">Forms on Android are currently under development. We are working hard to improve this in upcoming releases.</span>'
// });
// }

mitchellsimoens
1 Aug 2011, 8:18 AM
That is a bug and have tested with this override to fix it for now:


Ext.override(Ext.form.Select, {
showComponent: function() {
if (Ext.is.Phone) {
var picker = this.getPicker(),
value = this.getValue();

picker.show();
picker.setValue(value);
}
else {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
}
});

jlscott3
1 Aug 2011, 10:51 AM
Mitchell-

Thanks for the response. We had to make a slight change to your override code but it's working for us now.


showComponent: function() {
if (Ext.is.Phone) {
// work around to compensate for Sencha bug: TOUCH-314
var picker = this.getPicker(),
value = this.getValue();
picker.show();
var pickerValue = {};
pickerValue[this.name] = value;
picker.setValue(pickerValue);
} else {
var listPanel = this.getListPanel(),
index = this.store.findExact(this.valueField, this.value);

listPanel.showBy(this.el, 'fade', false);
listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
}
}

mitchellsimoens
1 Aug 2011, 11:02 AM
Ah yes... my oversight :)