在 Ext.js 中改变 checkboxgroup 的值

Question

我写了以下内容：

{
    xtype: "checkboxgroup",
    fieldLabel: "Content type",
    name: "content_type",
    id: "fx-form-content_type",
    rows: 1,
    value: 0,
    editable: false,
    forceSelection: true,
    queryMode: "local",
    horizontal: true,
    hidden: false,
    listeners: {
        change: function(cmp, value) {

            //console.error(cmp.down("checkbox[inputValue=1]"));
            //console.error(cmp.down("checkbox[inputValue=0]"));

            //var vod_or_npvr = value["content_type_vod_or_npvr"];
            console.error(cmp);
            console.error(value);
            /*
            if(vod_or_npvr === 0)
            {
                Ext.getCmp("fx-form-content_type").setValue(2);
            }

            else if(vod_or_npvr === 1)
            {
                Ext.getCmp("fx-form-content_type").setValue(1);
            }
            else if(vod_or_npvr === [1,0])
            {
                Ext.getCmp("fx-form-content_type").setValue(0);
            }
            else {
                Ext.getCmp("fx-form-content_type").setValue(3);
            }*/

        }
    },
    items: [{
        xtype: "checkboxfield",
        fieldLabel: "VOD",
        checked: false,
        //name      : "content_type_vod_or_npvr",
        inputValue: 1,
        id: "fx-form-content_type-VOD",
        value: 1,
        labelWidth: 40
    }, {
        xtype: "checkboxfield",
        fieldLabel: "NPVR",
        checked: false,
        //name      : "content_type_vod_or_npvr",
        inputValue: 0,
        id: "fx-form-content_type-NPVR",
        value: 2,
        labelWidth: 40
    }]
}

如何更改checboxgroup 的值？

我需要它来让checboxes 两个都枯萎，一个都不枯萎，或者其中一个枯萎。我正在尝试使用更改侦听器和setValue 函数来做到这一点，但它不起作用。 谁能明白怎么做？

Answer 1

您可以使用CheckboxGroup.setValue(false) 重置其中的所有项目，或者如果您想重置特定项目，则只需使用CheckboxGroup.down(your item here)，然后再次使用.setValue(false)。

您可以在这里查看工作Sencha Fiddle。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'form',
            title: 'Checkbox Group',
            width: '100%',

            bodyPadding: 10,
            renderTo: Ext.getBody(),
            bbar: ['->', {
                text: 'Reset All',
                handler: function () {
                    var checkboxgroup = this.up('form').down('checkboxgroup');
                    checkboxgroup.setValue(false)
                }
            },{
                text: 'Reset Item 2',
                handler: function () {
                    var checkboxgroup = this.up('form').down('checkboxgroup');
                    checkboxgroup.down('[inputValue=2]').setValue(false)
                }
            }],

            items: [{
                xtype: 'checkboxgroup',
                fieldLabel: 'Two Columns',
                // Arrange checkboxes into two columns, distributed vertically
                columns: 2,
                vertical: true,
                items: [{
                    boxLabel: 'Item 1',
                    name: 'rb',
                    inputValue: '1'
                }, {
                    boxLabel: 'Item 2',
                    name: 'rb',
                    inputValue: '2',
                    checked: true
                }, {
                    boxLabel: 'Item 3',
                    name: 'rb',
                    inputValue: '3'
                }, {
                    boxLabel: 'Item 4',
                    name: 'rb',
                    inputValue: '4'
                }, {
                    boxLabel: 'Item 5',
                    name: 'rb',
                    inputValue: '5'
                }, {
                    boxLabel: 'Item 6',
                    name: 'rb',
                    inputValue: '6'
                }]
            }]
        });
    }
});