Question

尝试学习Sencha Touch 2，我似乎无法找到如何在选择字段中设置默认选定选项。这是我在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);
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
    }
});

我是否需要等到应用程序本身准备就绪？像这样：

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

如果是这样，我如何在视图中的元素上设置标识符，以便我可以在应用程序的onReady事件中定位它们？

非常感谢任何帮助。到目前为止爱Sencha。他们的文档很棒。只需要找到更多这些文档的例子，我就是墨水，我们都会好起来的。：P

Answer 1

只需使用value配置中的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'}
                    ]
                }
            ]
        }
    ]
});

希望这有帮助

设置Sencha Touch 2选择区域的选定选项

1 个答案: