ExtJS 6 如何捕获动态单选组或复选框上的选择

Question

我正在尝试从无线电组中捕获选定的无线电或从正在动态填充的复选框组中捕获选定的复选框。我有一个接收属性和数据的组件，它动态地构造无线电或复选框。它按预期那样做，但是，如何捕获选择？这是我目前所拥有的：

    Ext.define('mycomp', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.WidgetProp',
    collapsible: false,

    initComponent: function () {
        const that = this;
        const id = this.id;

        const items = [
            {
                xtype: 'fieldcontainer',
                defaultType: that.propType === 'radio' ? 'radiofield' : 'checkboxfield',
                defaults: {
                    flex: 1
                },
                layout: 'vbox',
                columns: 2,
                vertical: true,
                simpleValue: true,
                items: that.dataList.map(function (x) {
                    const item = {
                        boxLabel: x.boxLabel,
                        name: x.name,
                        inputValue: x.inputValue,
                        id: x.id
                    };
                    return item;
                }),
                listeners: {
                   change: function(item, newval, oldval, eopts) {
                       console.log('clicked', item, newcal, oldval, eopts);
                   }
                } 
            }
        ];
        this.items = items;
        this.callParent(arguments);
    }
});

但它根本不起作用，它不会在控制台上打印任何内容，我尝试了 change、click、beforechange，我尝试了 [=14] =] 但似乎没有任何效果。关于如何实现这一目标的任何提示？我是否以正确的方式调用事件？为什么这不起作用？

Answer 1

FieldContainer 没有更改事件，它只是容器。收听者必须位于收音机或检查字段中。

Ext.define('mycomp', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.WidgetProp',
    collapsible: false,
    dataList: [],

    initComponent: function () {
        const that = this;
        const id = this.id;

        const items = [{
            xtype: 'fieldcontainer',
            defaultType: that.propType === 'radio' ? 'radiofield' : 'checkboxfield',
            defaults: {
                flex: 1
            },
            layout: 'vbox',
            columns: 2,
            vertical: true,
            simpleValue: true,
            items: that.dataList.map(function (x) {
                const item = {
                    boxLabel: x.boxLabel,
                    name: x.name,
                    inputValue: x.inputValue,
                    id: x.id,
                    listeners: {
                        change: function (item, newVal, oldVal, eopts) {
                            console.log('clicked', newVal, oldVal, eopts);
                        }
                    }
                };
                return item;
            })
        }];
        this.items = items;
        this.callParent(arguments);
    }
});

Fiddle

ExtJS 6 如何捕获动态单选组或复选框上的选择

ExtJS 6 how to capture the selection on a dynamic radiogroup or and a checkboxgroup

extjs