在 Ext JS 中的无线电组上添加事件处理程序

Question

我想添加一个事件，如果我点击单一 IP 单选按钮，一个 IP 地址字段应该出现在表单中，如果我点击 IP 范围单选按钮，那么两个 IP 地址字段应该出现，即“来自： “ 并： ”。我在 IP 字段中使用了项目 ID。但它对我不起作用。 “modifiedIpRange”我已经在控制器文件中定义了。

{
            xtype: 'radiogroup',
            fieldLabel: 'Type',
            name: 'type',
            items: [{
                boxLabel: 'Single IP',
                inputValue: 'SINGLE',
                checked: true,
            },{
                boxLabel: 'IP Range',
                inputValue: 'RANGE'
            }] 
 listeners: {
     change: 'modifiedIpRange'
 }

}

modifiedIpRange: function(item, newVal, oldVal) {
switch (newVal.type){
    case 'SINGLE': Ext.ComponentQuery.query('#ipField')[0].setHidden(false) && Ext.ComponentQuery.query('#startIpField')[0].setHidden(true) && Ext.ComponentQuery.query('#endIpField')[0].setHidden(true);
    break;
    case 'RANGE': Ext.ComponentQuery.query('#startIpField')[0].setHidden(false) && Ext.ComponentQuery.query('#endIpField')[0].setHidden(false) && Ext.ComponentQuery.query('#ipField')[0].setHidden(true);
    break;
}
  
},

Answer 1

是这样的吗？:

var rgChange = function(item, newVal, oldVal) {
    switch (newVal.type){
        case '1': Ext.get('txt2').hide();
        break;
        case '2': Ext.get('txt2').show();
        break;
    }
  
};


Ext.create('Ext.form.Panel', {
    title: 'RadioGroup Example',
    width: 500,
    height: 325,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'radiogroup',
            fieldLabel: 'Type',
            name: 'type',
            items: [{
                boxLabel: 'Single IP',
                inputValue: '1',
                checked: true,
            },{
                boxLabel: 'IP Range',
                inputValue: '2'
            }],
            listeners: {
                change: {
                    fn: rgChange
                }
            },
        },
         {
            xtype:'textfield',
            id: 'txt1',
            fieldLabel:'From'
        },
        {
            xtype:'textfield',
            id: 'txt2',
            fieldLabel: 'to',
            hidden:true
        },
        
    ]
});

在 Ext JS 中的无线电组上添加事件处理程序

Adding event handler on radio group in Ext JS

extjs