如何在无线电领域选择显示特定面板时如何在Extjs中编写单个监听器？

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(); 
          } 
         } 
        } 



       },

来源

2017-09-08 user6454237

请正确地格式化代码 – Derlin

目前我有听众每个无线领域，而不是如何利用单一听众 – user6454237

@ user6454237请做代码格式化第一。你的代码不可读。 – UDID

请试着做这样的，它可能是你的工作..

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(); 
       } 
      } 
     } 

    },

其实， “& & NEWVALUE” 不需要...... 感谢.. :)

来源

2017-09-08 13:19:47

不适用于我，如果值为true，则不会调用所述面板 – user6454237

例如：if（true）{Ext.getCmp（'predefinedDatePanel'）。show（）; }应该调用这个面板，但它会去其他如果语句，而不是调用该面板 – user6454237

@ user6454237现在检查代码更新..我写错了“getValue”的拼写.. –

在ExtJs文档RadioGroup有更改事件。您可以参考ExtJs docs

我已经创建了一个小演示，以根据您的要求向您展示它是如何工作的。 Sencha fiddle example

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

来源

2017-09-15 12:53:33

如何在无线电领域选择显示特定面板时如何在Extjs中编写单个监听器？

回答

相关问题