PDA

View Full Version : Select losing currently selected after cancel



cisysdan
19 Jul 2011, 1:18 PM
I have an Ext.form.Select that seems to be losing track of the currently selected value after Cancel on iPhone. When I select the field to change the value and then choose the Cancel button instead of Done to exit the selection and then immediately select the field to change it again, the first option is always highlighted after the cancel in the change popup window regardless of what option is actually currently selected in the select before I attempt to change it.

I have searched the forums and haven't had any luck finding an answer so far. Any ideas?

Here is my Select definition:



{
xtype: 'selectfield',
id: 'sort',
name: 'sort',
label: 'Sort By',
options: [
{text: 'Patient Name', value:'Patient Name'},
{text: 'ID Number', value:'ID Number'},
{text: 'Room/Bed', value:'Room/Bed'},
{text: 'Responsible Provider', value:'Responsible Provider'}
]},

jlscott3
19 Jul 2011, 6:41 PM
This is reproducible in the kitchen sink example with a slight change - see code below.

This happens on iPhone 4, iOS 4.3.3 (I expect it affects other phones, that's just what I have available to test). Steps:

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>'
// });
// }