Geek asks and answers

Setting the selected Sencha Touch 2 option

Trying to recognize Sencha Touch 2, and I can’t understand how to set the default option selected in the selection box. Here is what I tried in my view of Main.js:

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 wait until the application itself is ready? Something like that:

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 can I set the identifier for the elements in my views so that I can configure them as part of the onReady event of the application?

Any help is appreciated. Loving Sencha so far. Their documents are gorgeous. You just need to find more examples of these documents, and I will all be much better ink .: P

+5
source share
1 answer

Just use the attribute valuein the configuration selectfield:

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

, ,

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

,

+5

More articles:


All Articles