ExtJs 通过模型设置 RadioGroup Item

Question

我在通过我的视图模型设置单选按钮组的选定项时遇到了一些问题。是否可以通过元素名称设置选定值？我希望 viewmodel gender = true 与第二个 ('female') 单选按钮匹配。

Ext.application({    
    launch: function () {

        var form = Ext.widget('form', {

            renderTo: Ext.getBody(),
            viewModel: {
                data: {
                    gender: true
                }
            },

            items: [{
                xtype: 'radiogroup',
                fieldLabel: 'Gender',
                name: 'rbGender',
                defaults: {
                    flex: 1
                },
                layout: 'hbox',
                items: [{
                    boxLabel: 'Male',
                    name: 'gender',
                    inputValue: false,
                    id: 'radio1'
                }, {
                    boxLabel: 'Female',
                    name: 'gender',
                    inputValue: true,
                    id: 'radio2'
                }]
            }]

        });

    }
});

Answer 1

不，这对于 viewModel 是不可能的。 viewModel 始终依赖于 bind 配置，例如

绑定：“{性别}”，

你不想绑定单选控件，你想绑定单选组。您还想做的是将 radiogroup 设置为 simpleValue: true。

工作示例：

viewModel: {
    data: {
        gender: false
    }
},

items: [{
    xtype: 'radiogroup',
    fieldLabel: 'Gender',
    name: 'rbGender',
    bind: '{gender}', // <- bind this field to the viewModel's "gender" value.
    simpleValue: true, // <- use a boolean, not an object.
    defaults: {
        flex: 1
    },
    ...

如果你想用 name 做 "old-school" 的方式，你必须使用 form.setValues() and form.getValues() 而不是 viewModel。

在ExtJS 5.x中，simpleValue不可用并且defaultBindProperty为空，所以你必须改变：

viewModel: {
    data: {
        gender: { // In ExtJS 5, radiogroups can only take objects, not simple values
            rbGender: false
        }
    }
},

items: [{
    xtype: 'radiogroup',
    fieldLabel: 'Gender',
    name: 'rbGender',
    bind: { // bind has to be a complex object, because defaultBindProperty is not available.
        value:'{gender}'
    },

    items: [{
        boxLabel: 'Male',
        name: 'rbGender', // <- tell the radiogroup to put the rbGender property into these checkboxes

ExtJs 通过模型设置 RadioGroup Item

ExtJs set RadioGroup Item by model

extjs

extjs5