Setting selected option of Sencha Touch 2 selectfield - extjs

Question

Trying to learn Sencha Touch 2 and I can't seem to find out how to set the default selected option in a selectfield. Here's what I've tried in my Main.js view:
Ext.define('mobile-form.view.Main', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'Ext.form.FieldSet',
'Ext.field.Select',
],
config: {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'titlebar',
docked: 'top',
cls: 'titlebar'
},
{
xtype: 'panel',
scrollable: 'vertical',
cls: 'form_container',
flex: 1,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'selectfield',
label: 'Desired Policy Type',
labelWidth: 'auto',
name: 'test',
options: [
{text: 'Test 1', value: '1'},
{text: 'Test 2', value: '2'},
// this doesn't work
{text: 'Test 3', value: '3', selected: true},
{text: 'Test 4', value: '4'}
],
listeners: {
// this doesn't work
painted: function() {
console.log(this);
this.select(3);
}
}
}
]
}
]
}
]
}
});
Do I need to instead wait till the Application itself is ready? Something like this:
Ext.application({
name: 'mobile-form',
requires: [
'Ext.MessageBox'
],
views: ['Main'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('mobile-form.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
},
onReady: function() {
{SomeWayToTargetElement}.select(2);
}
});
If so how do I set an identifier on elements in my views so that I can target them within the onReady event of the application?
Any assistance is greatly appreciated. Loving Sencha so far. Their docs are great. Just need to find more examples of those docs and I the ink we'll all be much better off. :P

Answer 1

Just use the value attribute on the selectfield's config :
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
value:'second',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
}
]
});
You can also do it with listeners, like your were trying to do
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'fieldset',
title: 'Select',
items: [
{
xtype: 'selectfield',
label: 'Choose one',
listeners:{
initialize:function(){
this.setValue('second');
}
},
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
}
]
});
Hope this helps