Configuración de la opción seleccionada de Sencha Touch 2 selectfield

Question

Intentando aprender Sencha Touch 2 y parece que no puedo encontrar la manera de configurar la opción seleccionada por defecto en un campo de selección. Esto es lo que he intentado en mi opinión 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); 
             } 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
    } 
}); 

¿Es necesario esperar hasta el lugar de la propia aplicación está lista? Algo como esto:

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

Si es así ¿Cómo se configura un identificador de elementos en mis puntos de vista para que pueda dirigirse a ellos en el caso onReady de la aplicación?

Cualquier ayuda es muy apreciada. Amar a Sencha hasta ahora. Sus documentos son geniales. Solo necesito encontrar más ejemplos de esos documentos y la tinta nos va a ir mucho mejor. : P

Answer 1

sólo tiene que utilizar el atributo value en el 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'} 
        ] 
       } 
      ] 
     } 
    ] 
}); 

También puede hacerlo con los oyentes, como tu estaban tratando de hacer

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

Esperanza esto ayuda