Блог

Главная - Вопросы по программированию - Добавление обработчика событий в группу радио в Ext JS

Добавление обработчика событий в группу радио в Ext JS

#extjs

Вопрос:

Я хочу добавить событие, в котором, если я нажму на одну переключатель IP, в форме должно появиться одно поле IP-адреса, а если я нажму на переключатель диапазона IP, то должно появиться два поля IP-адреса, т. Е. «от:» и «до: «. Я использовал идентификатор элемента для полей IP. но у меня это не работает. «Измененный диапазон», который я определил в файле контроллера.

 {
            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) amp;amp; Ext.ComponentQuery.query('#startIpField')[0].setHidden(true) amp;amp; Ext.ComponentQuery.query('#endIpField')[0].setHidden(true);
    break;
    case 'RANGE': Ext.ComponentQuery.query('#startIpField')[0].setHidden(false) amp;amp; Ext.ComponentQuery.query('#endIpField')[0].setHidden(false) amp;amp; Ext.ComponentQuery.query('#ipField')[0].setHidden(true);
    break;
}
  
},

Комментарии:

1. Что ты имеешь в виду?

2. Если включено радио «Один IP», то в форме должно быть только одно текстовое поле, в противном случае для «Диапазона IP» в форме должно быть два текстовых поля

3. Какую версию ExtJS вы используете?

Ответ №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
        },
        
    ]
});
Метки: