Question

我有4个复选框：

            {
                xtype: 'panel',
                layout: 'vbox',
                border: 1,
                defaults: { xtype: 'checkbox', anchor: '100%', margin: '2 0 2 2' },
                items: [
                    { bind: { value: '{allObj.goods}' } },
                    { bind: { value: '{allObj.names}' } },
                    { bind: { value: '{allObj.fires}' } },
                    { bind: { value: '{allObj.counts}' } }
                ]
            },

我想接下来：如果只有一个复选框：

checked = true

和其他：

checked = false

，对checked = false禁用此复选框。

Answer 1

如果您希望一次只能检查一个复选框，我认为您可以使用Ext.field.Radio，但如果您想要完全使用Ext.field.Checkbox，您可以执行类似的操作：

        listeners: {
            change: function (checkbox, value) {
                if (!value)
                    return;

                Ext.each(
                    checkbox.up('panel').query('checkbox[checked=true]:not([name=' + checkbox.name + '])'),
                    function (checkbox) {
                        checkbox.uncheck();
                    }
                );
            }
        }

选中simple fiddle。

更新：在第二次阅读你的问题后，我意识到你可能想要在检查任何一个时禁用所有其他复选框。如果是这样，你可以做类似的事情：

            listeners: {
                change: function (checkbox, value) {
                    var panel = checkbox.up('panel');
                    if (value) {
                        Ext.each(
                            panel.query('checkbox:not([name=' + checkbox.name + '])'),
                            function (checkbox) {
                                checkbox.disable();
                            }
                        );
                    } else {
                        Ext.each(
                            panel.query('checkbox[disabled=true]'),
                            function (checkbox) {
                                checkbox.enable();
                            }
                        );
                    }
                }
            }

选中simple fiddle。

Answer 2

如果只选中了一个复选框，则要禁止取消选择;并且由于您的代码包含绑定，因此您希望使用绑定来执行此操作。你在这里：

items:[{
    xtype:'checkbox',
    bind: {
        value: '{allObj.goods}', 
        disabled:'{allObj.goods && !allObj.names && !allObj.fires && !allObj.counts}'
    }
},{
    xtype:'checkbox',
    bind: {
        value: '{allObj.names}',
        disabled:'{!allObj.goods && allObj.names && !allObj.fires && !allObj.counts}'
    }
},{
    xtype:'checkbox',
    bind: {
        value: '{allObj.fires}', 
        disabled:'{!allObj.goods && !allObj.names && allObj.fires && !allObj.counts}'
    }
},{
    xtype:'checkbox',
    bind: {
        value: '{allObj.counts}', 
        disabled:'{!allObj.goods && !allObj.names && !allObj.fires && allObj.counts}'
    }
}]

https://fiddle.sencha.com/#view/editor&fiddle/20rt

另一方面，为了更好的可重用性，您不应该使用defaults.xtype;有defaultType可用于此。

错误（虽然有时正在工作）：

defaults: { xtype: 'checkbox', margin: '2 0 2 2', ...

正确：

defaultType: 'checkbox',
defaults: {
    margin: '2 0 2 2',
    ...

始终选中一个复选框= true

2 个答案: