ExtJS无线电组 - 如何根据用户确认设置值?

时间:2017-02-27 05:58:51

标签: extjs radio-button extjs5 radio-group

我有一个带有两个单选按钮的无线电组字段。默认情况下会选中一个单选按钮。当我点击另一个时,更改事件触发器并呈现一条说明是或否的确认消息。如果单击是,则值将更改。如果单击否,则值应保持不变。

e.g。默认选择项目2。如果我点击第1项,然后点击“否”。应检查第2项,但不检查第1项。

var RG = Ext.create({
        xtype: 'radiogroup',
        fieldLabel: 'Two Columns',
        // Arrange radio buttons 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}
        ],
        listeners:{
            'change':function(cmp, newValue, oldValue){
                Ext.Msg.show({
                    title:'Save Changes?',
                    message: 'Would you like to save your changes?',
                    buttons: Ext.Msg.YESNO,
                    icon: Ext.Msg.QUESTION,
                    fn: function(btn) {
                        if (btn === 'yes') {
                            alert('Yes pressed');
                        } else if (btn === 'no') {
                            alert('No pressed');
                            //New Code
                        }
                    }
                });
            }
        }
    });

Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 300,
    height: 125,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[RG]
});

请让我知道如何进行适当的更改以实现此行为。

提前致谢!

2 个答案:

答案 0 :(得分:1)

首先提出更改事件,然后再次使用旧值设置组件继续更改事件,找到下面的代码

      Ext.Msg.show({
                title:'Save Changes?',
                message: 'Would you like to save your changes?',
                buttons: Ext.Msg.YESNO,
                icon: Ext.Msg.QUESTION,
                fn: function(btn) {
                    if (btn === 'yes') {
                        alert('Yes pressed');
                    } else if (btn === 'no') {
                        cmp.suspendEvent('change');
                        cmp.setValue(oldValue);
                        cmp.resumeEvent('change');
                    }
                }
            });

答案 1 :(得分:1)

您正在寻找的方案可以通过控制器实现。为更改侦听器提供函数名称,如下所示: 听众:{                         改变:'applicantRadioChange'                     }

将此功能写入控制器:

applicantRadioChange : function(cmp,newValue,oldValue){

if(newValue != oldValue)
{
Ext.Msg.show({
                            title:'Save Changes?',
                            message: 'Would you like to save your changes?',
                            buttons: Ext.Msg.YESNO,
                            icon: Ext.Msg.QUESTION,
                            fn: function(btn) {
                                if (btn === 'yes') {
                                    alert('Yes pressed');
                                } else if (btn === 'no') {
                                    cmp.setValue(oldValue);

                                }
                            }
                        });

}