Ext js処理の設定別のdatepickerの値を使用してdatepickerのminDate

Question

おはようございます。 私は次のように定義された2つのdatepickers使用して、日付範囲の選択をやってる：私は達成しようとしている何

items: { 
         xtype: 'panel', 
         layout: 'hbox',      
         items: [{ 
          title: 'FROM', 
          margin: '5', 
          items: { 
           xtype: 'datepicker', 
           start: true, 
           reference: 'startDate', 
           maxDate: new Date(), 
           maxText: 'Future dates are not available', 
           bind: { 
            value: '{startDate}' 
           }, 
           showToday: false, 
           listeners: { 
            select: 'checkDateInterval' 
           } 
          } 
         }, { 
          title: 'TO', 
          margin: '5', 
          items: { 
           xtype: 'datepicker', 
           start: false, 
           reference: 'endDate', 
           bind: { 
            value: '{endDate}' 
           }, 
           maxDate: new Date(), 
           showToday: false, 
           listeners: { 
            select: 'checkDateInterval' 
           } 
          } 
         }] 
        } 

する最初の一つで選択した日付のような第2日付ピッカーのMinDateプロパティを設定することですので、ユーザーは最初の日付を選択した後、過去の日付を選択することはできません。 また、最初の日付ピッカーでユーザーが日付を選択すると、2番目の日付をリセットしたいと思います。

最初の要素で選択した日付をどのようにポイントできますか？

Answer 1

使用この：

 
{ 
    xtype: 'datefield', 
    hidden: true, 
    width: '17%', 
    editable: false, 
    tabIndex: 6, 
    id: 'start', 
    format: 'Y-m-d', 
    minDate: new Date(), 
    name: 'start_date', 
    onTriggerClick: function() { 
     var dt = this; 
     var due = Ext.getCmp('Due'); 
     dt.setMaxValue(due.value); 
     Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments); 
    }, 
    listeners: { 
     change: function(dp, date) { 
      var due = Ext.getCmp('Due'); 
      due.setValue(date); 
     } 
    } 
}, { 
    xtype: 'datefield', 
    hidden: true, 
    id: 'Due', 
    editable: false, 
    tabIndex: 8, 
    width: '17%', 
    format: 'Y-m-d', 
    name: 'due_date', 
    onTriggerClick: function() { 
     var dt = this; 
     dt.setMinValue(Ext.getCmp('start').value); 
     Ext.form.DateField.prototype.onTriggerClick.apply(dt, arguments); 
    }, 
    listeners: { 
     change: function(dp, date) { 
       var start = Ext.getCmp('start'); 
       start.setValue(date); 
     } 
    } 
} 

Answer 2

あなたはこの

     items: { 
          xtype: 'datepicker', 
          start: false, 
          reference: 'endDate', 
          bind: { 
           value: '{endDate}', 
           minDate: '{startDate}', 
          }, 
          showToday: false, 
          listeners: { 
           select: 'checkDateInterval' 
          } 
         } 

のようにあなたののcheckDateInterval機能でendDateにピッカー値をリセットすることができ、たstartDateを指して、バインドの設定にendDateにMinDateプロパティプロパティを動かすことができるようにmaxDateのプロパティは、バインド可能ですコントローラ。

var picker = this.getView().lookupReference('endDate'); 
picker.setValue(null);