如何在Extjs 4中使用自定义检查或选中的radiogroup事件

Posted 2021-05-06

我只想在检查单选按钮时调用change事件，但是当我们设置值时，更改事件也会调用...就像这样。

Ext.getCmp('2007').setValue({ '2007': 'NoAccess' });

任何人都可以告诉我如何使用自定义检查事件或任何其他事件，以便我们仅在选中（单击）单选按钮上调用更改事件。

我正在使用Ext.Version 4.2.1。

这是我的代码： -

                 {
                    xtype: 'radiogroup',
                    fieldLabel: '  Admin Notes',
                    labelStyle: 'font-size: 12px;color:#3399CC;',
                    margin: '0 0 0 3',
                    defaultType: 'radio',
                    id: '2007', 
                    name: '2007',
                    defaults: {
                        flex: 1
                    },
                    items: [
                        {
                            boxLabel: 'Read and Update',
                            inputValue: 'ReadUpdate',
                            name: '2007'
                        }, {
                            boxLabel: 'Read Only',
                            margin: '0 0 0 20',
                            inputValue: 'ReadOnly',
                            name: '2007'
                        }, {
                            boxLabel: 'No Access',
                            inputValue: 'NoAccess',
                            name: '2007'
                        }
                    ],


                    listeners: {
                        change: function() {

                          alert("True");

                        },

答案

在首先使用setValue()之前，您需要使用以下两种RadioGroup方法。

1）。 suspendEvent或suspendEvents到Suspends the firing of particular or all events。

2）。 radiogroup.setValue({name:'value'})将设置具有相应名称和值的无线电。

3）。 resumeEvent或resumeEvents恢复命名事件或所有事件的射击。

在这个FIDDLE中，我使用radiogroup创建了一个演示。我希望它能帮助您实现您的要求。

代码片段

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup example with change event call when dyanmic value set.',
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'radiogroup',
        fieldLabel: 'Admin Notes',
        defaultType: 'radio',
        id: '2007',
        defaults: {
            name: '2007'
        },
        items: [{
            boxLabel: 'Read and Update',
            inputValue: 'ReadUpdate'
        }, {
            boxLabel: 'Read Only',
            margin: '0 0 0 20',
            inputValue: 'ReadOnly'
        }, {
            boxLabel: 'No Access',
            inputValue: 'NoAccess'
        }],
        listeners: {
            change: function (cmp, newValue) {
                Ext.Msg.alert('Success', 'Checked value is :- ' + newValue['2007']);
            }
        }
    }],
    listeners: {
        afterrender: function () {
            var rb = Ext.getCmp('2007');
            rb.suspendEvents();
            rb.setValue({
                '2007': 'NoAccess'
            });
            rb.resumeEvents();
        }
    }
});