Setting selected option of Sencha Touch 2 selectfield

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/[email protected]',
        '144': 'resources/icons/[email protected]'
    },

    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