如何啓用/禁用基於無線電字段選擇的extjs中的組件

我想基於無線電字段選擇啓用/禁用extjs中的組件。這裏是我的代碼：如何啓用/禁用基於無線電字段選擇的extjs中的組件

items: [{ 
    xtype: 'radiogroup', 
    vertical: 'false', 
    columns: 2, 
    width: 400, 
    items: [{ 
     boxLabel: 'Select time interval', 
     name: 'timeInterval', 
     id: 'timeIntervalPanel', 
     checked: true, 
     inputValue: 'timeInterval', 
     listeners: { 
      change: function() { 
       Ext.getCmp('timeIntervalPanel').enable(); 
      } 
     } 

    }, { 
     boxLabel: 'Last Measurement Collected', 
     name: 'timeInterval', 
     id: 'LastMeasurement', 
     inputValue: 'lastMeasuremnet', 
     listeners: { 
      change: function() { 
       Ext.getCmp('timeIntervalPanel').disable(); 
      } 
     } 
    }] 

}, { 
    id: 'timeIntervalPanel', 
    xtype: 'optima-timeintervalpanel', 
    name: 'timeIntervalPanel', 
    text: 'select', 
    endDate: new Date(), 
    startDate: Ext.Date.add(new Date(), Ext.Date.DAY, -30), 
    disabled: true 
}]

來源

2017-09-18 user6454237

試過啓用和d通過使組件被禁用爲true的方法 – user6454237

我想啓用和禁用基於無線電領域的timeIntervalPanel選擇 – user6454237

哪個版本的extjs？ – NAmorim

的問題是，你必須在第一無線電項目ID重複，並與的xtype optima-timeintervalpanel的組件。從第一個無線電項目中刪除id: 'timeIntervalPanel'可解決問題。

這裏是一個工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/26sl

EDIT

類似的方法作爲@njdhv使用（指定變化事件監聽器到無線電基團），但不知何故被簡化了：

listeners: { 
    change: function(radiogrup, value) { 
     Ext.getCmp('timeIntervalPanel').setDisabled(
      value.timeInterval === 'timeInterval' 
     ); 
    } 
}

工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/26t6

來源

2017-09-19 06:22:00 scebotari66

感謝您的解決方案，但它沒有啓用選擇「選擇時間間隔」時提交的日期它是在上次測量時啓用 – user6454237

我希望啓用日期字段時選擇「選擇時間間隔」 – user6454237

我編輯了我的答案。。 – scebotari66

在ExtJS的文檔RadioGroup中有變化的事件。您可以將您的邏輯放入更改事件RadioGroup。欲瞭解更多詳情，請參閱ExtJs docs for RadioGroup

我已經創建了一個小演示，以根據您的要求向您展示它的工作原理。 Sencha fiddle example

Ext.create('Ext.form.Panel', { 
    title: 'RadioGroup Example enable/disable button on change', 
    width: '100%', 
    height: 500, 
    itemId: 'myPanel', 
    bodyPadding: 10, 
    renderTo: Ext.getBody(), 
    dockedItems: [{ 
     xtype: 'toolbar', 
     defaults: { 
      xtyple:'button', 
      disabled:true, 
      handler:function(){ 
       Ext.Msg.alert('Click','This button is enable..!'); 
      } 
     }, 
     items: [{ 
      html: 'predefinedDateButton', 
      itemId: 'predefined' 
     }, { 
      html: 'lastXDateButton', 
      itemId: 'lasthours' 
     }, { 
      html: 'specifyDateButton', 
      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.setDisabled(true); 
       }) 
       myPanel.down(`#${newValue.timeInterval}`).setDisabled(false); 
      } 
     }, 
     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-19 06:21:37

如何啓用/禁用基於無線電字段選擇的extjs中的組件

回答

相關問題