title: Cancel button in date picker
body: <p>I have created a datepicker field. When the date picker is displayed and the cancel button is tapped, it takes the first value as the default value. I need to check a condition where I can handle the cancel button on the date pipcker field</p>
  
  <pre><code> case 'Date':
          console.log('date value: '+value);
          var dt = new Date(value);
          console.log('new date: '+dt);
          if (dt == 'Invalid Date' || dt == 'NaN/NaN/0NaN') {
              value = '';
          } else {
              value = dt;
          }
          element = Ext.create('Ext.Container', {
              layout : 'hbox',
              items : [ {
                  xtype : 'datepickerfield',
                  label : label,
                  name : 'standTimeEdit',
                  defaultDateFormat : 'D M Y',
                  value : value,
                  width : '100%',
                  style : 'border: 0px solid gray;border-radius:10px',
                  listeners:{
                      change:function(){
                           value = dt;
                      }
                      cancel:function(){
                          console.log('cancel event fired');
                      }
                  }
              } ]
          });
          break;
  </code></pre>