Đặt tùy chọn đã chọn của Sencha Touch 2 selectfield

Question

Đang cố gắng tìm hiểu Sencha Touch 2 và tôi dường như không thể tìm hiểu cách đặt tùy chọn được chọn mặc định trong một vùng chọn. Dưới đây là những gì tôi đã thử trong chế độ xem Main.js của mình:

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

Tôi có cần phải chờ đến khi bản thân ứng dụng sẵn sàng không? Một cái gì đó như thế này:

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

Nếu vậy làm cách nào để thiết lập một định danh trên các yếu tố trong quan điểm của tôi để tôi có thể nhắm mục tiêu chúng trong sự kiện onready của ứng dụng?

Bất kỳ hỗ trợ nào được đánh giá cao. Loving Sencha cho đến nay. Tài liệu của họ rất tuyệt. Chỉ cần tìm thêm các ví dụ về các tài liệu đó và tôi là mực, tất cả chúng ta sẽ tốt hơn nhiều. : P

Answer 1

Chỉ cần sử dụng các thuộc tính value trên 's 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'} 
        ] 
       } 
      ] 
     } 
    ] 
}); 

Bạn cũng có thể làm điều đó với người nghe, giống như bạn đang cố gắng để làm

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