라디오 필드가 특정 패널을 표시하기 위해 선택되면 라디오 그룹 용 Extjs에 단일 수신기를 쓰는 방법은 무엇입니까?

Question

var radioGroup = { 
     xtype: 'radiogroup', 
     vertical: 'true', 
     columns: 1, 
     width: 200, 
     items: [{ 
        boxLabel: 'Select Predefined interval', 
        name: 'timeInterval', 
        id: 'selectPredefinedInterval', 
        inputValue: 'predefined', 
        listeners: { 
         change: function(rf, newValue, oldValue) { 
          if (newValue) { 
           Ext.getCmp('predefinedDatePanel').show(); 
          } else { 
           Ext.getCmp('predefinedDatePanel').hide(); 
          } 
         } 
        } 

       }, 
       { 
        boxLabel: 'Specify last X hours/days', 
        name: 'timeInterval', 
        id: 'SpecifyLastHours', 
        inputValue: 'lasthours', 
        listeners: { 
         change: function(rf, newValue, oldValue) { 
          if (newValue) { 
           Ext.getCmp('lastXDatePanel').show(); 
          } else { 
           Ext.getCmp('lastXDatePanel').hide(); 
          } 
         } 
        } 


       }, 
       { 
        boxLabel: 'Specify date or interval', 
        name: 'timeInterval', 
        id: 'specifiedDate', 
        inputValue: 'specifydate', 
        listeners: { 
         change: function(rf, newValue, oldValue) { 
          if (newValue) { 
           Ext.getCmp('specifyDatePanel').show(); 
          } else { 

           Ext.getCmp('specifyDatePanel').hide(); 
          } 
         } 
        } 



       }, 

Answer 1

Answer 2

:) .. "& & NEWVALUE가"... 덕분에 필요하지 않습니다 .. 당신을 위해 일 할 수있는, 같이 할 사실

var radioGroup = { 
     xtype: 'radiogroup', 
     vertical: 'true', 
     columns: 1, 
     width: 200, 
     items: [{ 
       boxLabel: 'Select Predefined interval', 
       name: 'timeInterval', 
       id: 'selectPredefinedInterval', 
       inputValue: 'predefined' 
      }, 
      { 
       boxLabel: 'Specify last X hours/days', 
       name: 'timeInterval', 
       id: 'SpecifyLastHours', 
       inputValue: 'lasthours', 
      }, 
      { 
       boxLabel: 'Specify date or interval', 
       name: 'timeInterval', 
       id: 'specifiedDate', 
       inputValue: 'specifydate' 
      } 
     ], 
     listeners: { 
      change: function(radio, newValue, oldValue) { 

       Ext.getCmp('predefinedDatePanel').hide(); 
       Ext.getCmp('lastXDatePanel').hide(); 
       Ext.getCmp('specifyDatePanel').hide(); 

       if (radio.getValue().timeInterval == 'predefined' && newValue) { 
        Ext.getCmp('predefinedDatePanel').show(); 
       } else if (radio.getValue().timeInterval == 'lasthours' && newValue) { 
        Ext.getCmp('lastXDatePanel').show(); 
       } else if (radio.getValue().timeInterval == 'specifydate' && newValue) { 
        Ext.getCmp('specifyDatePanel').show(); 
       } 
      } 
     } 

    }, 

시도하십시오 ExtJs에서 라디오 그룹은 이벤트가 있습니다. 당신이 참조 할 수 있습니다 ExtJs docs

귀하의 요구 사항에 따라, 어떻게 작동하는지 보여주기 위해 작은 데모를 만들었습니다.

Ext.create('Ext.form.Panel', { 
    title: 'RadioGroup Example', 
    width: '100%', 
    height: 500, 
    itemId: 'myPanel', 
    bodyPadding: 10, 
    renderTo: Ext.getBody(), 
    dockedItems: [{ 
     xtype: 'toolbar', 
     defaults: { 
      hidden: true 
     }, 
     items: [{ 
      html: 'predefinedDatePanel', 
      itemId: 'predefined' 
     }, { 
      html: 'lastXDatePanel', 
      itemId: 'lasthours' 
     }, { 
      html: 'specifyDatePanel', 
      itemId: 'specifydate' 
     }] 
    }], 
    items: [, { 
     xtype: 'radiogroup', 
     vertical: 'true', 
     columns: 1, 
     width: 200, 
     listeners: { 
      change: function (rf, newValue, oldValue) { 
       var myPanel = rf.up('#myPanel'); 
       myPanel.down('toolbar').items.items.map(item => { 
        item.hide(); 
       }) 
       myPanel.down(`#${newValue.timeInterval}`).show(); 
      } 
     }, 
     items: [{ 
      boxLabel: 'Select Predefined interval', 
      name: 'timeInterval', 
      id: 'selectPredefinedInterval', 
      inputValue: 'predefined' 

     }, { 
      boxLabel: 'Specify last X hours/days', 
      name: 'timeInterval', 
      id: 'SpecifyLastHours', 
      inputValue: 'lasthours' 

     }, { 
      boxLabel: 'Specify date or interval', 
      name: 'timeInterval', 
      id: 'specifiedDate', 
      inputValue: 'specifydate' 
     }] 
    }] 
});