Réglage de l'option sélectionnée de Sencha Touch 2 selectfield

À essayer d'apprendre Sencha Touch 2 et je n'arrive pas à trouver comment définir la valeur par défaut option sélectionnée dans un selectfield. Voici ce que j'ai essayé dans mon Main.js vue:

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

Dois-je plutôt attendre jusqu'à l'Application elle-même est prêt? Quelque chose comme ceci:

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

Si oui, comment puis-je configurer un identifiant sur les éléments de mon point de vue afin que je puisse cible dans le onReady cas de l'application?

Toute aide est grandement appréciée. Aimer Sencha jusqu'à présent. Leurs docs sont grands. Juste besoin de trouver d'autres exemples de ces docs et j'ai de l'encre, nous serons tous mieux lotis. 😛

OriginalL'auteur edward.louis | 2012-06-30

  1. 5

    Suffit d'utiliser la value attribut sur la selectfield'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'}
                    ]
                }
            ]
        }
    ]
});

    Vous pouvez aussi le faire avec les auditeurs, comme votre essayaient de faire

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

    Espère que cette aide

    Ahhh!! Ne peux pas croire que j'ai manqué dans les docs...merci beaucoup.
    Ouais, je cherchais quelque chose comme valeur par défaut ou selectedValue au premier abord, mais ensuite, j'ai trouvé.

    OriginalL'auteur Titouan de Bailleul