Ustawienie wybranej opcji pola wyboru Sencha Touch 2

Question

Próba nauczenia się Sencha Touch 2 i nie mogę się dowiedzieć, jak ustawić domyślną wybraną opcję w polu wyboru. Oto, co starałem moim zdaniem 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); 
             } 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
    } 
}); 

Czy muszę zamiast czekać, aż sama aplikacja jest gotowa? Coś takiego:

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

Jeśli tak, w jaki sposób ustawić identyfikator na elementach w moich poglądów tak, że można kierować je w onReady przypadku aplikacji?

Każda pomoc jest bardzo doceniana. Jak dotąd kochający Sencha. Ich dokumenty są świetne. Wystarczy znaleźć więcej przykładów tych dokumentów, a ja tusz, którym wszyscy będziemy znacznie lepiej. : P

Answer 1

Wystarczy użyć atrybutu value na 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'} 
        ] 
       } 
      ] 
     } 
    ] 
}); 

Można również zrobić to z słuchaczy, jak twój staraliśmy się zrobić

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

nadzieję, że to pomaga