时间戳

首页 > 解决方案 > 在 Ext JS 中的无线电组上添加事件处理程序

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

问题描述

我想添加一个事件，如果我单击单个 IP 单选按钮，一个 IP 地址字段应该出现在表单中，如果我单击 IP 范围单选按钮，那么两个 IP 地址字段应该出现，即“来自：”和“到： ”。我已将项目 ID 用于 IP 字段。但这对我不起作用。我在控制器文件中定义了“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;
}
  
},

标签： extjs

解决方案

像这样的东西？：

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
        },
        
    ]
});

推荐阅读