如何使用xtype点击“今日”按钮添加自定义代码：＆＃39; datefield＆＃39;

Question

如何使用xtype：'datefield'

在点击Today按钮上添加自定义代码

例如：点击“今天”按钮后添加自定义日期。

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date',
        maxValue: new Date()  // limited to the current date or prior
    }]
});

Answer 1

正如@ A1rPun建议的那样，这是一个从选择器中获取按钮的实现。

var picker = Ext.create('Ext.form.field.Date', {
    anchor: '100%',
    fieldLabel: 'From',
    name: 'from_date',
    maxValue: new Date()
});
var field = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,
    title: 'Dates',
    items: [picker]
});
picker.getPicker().todayBtn.on('click', function() { 
    alert('hello');
});

Answer 2

此代码不会阻止＆＃39;今天＆＃39;的默认行为。按钮！

{
    xtype: 'datefield',
    //...
    listeners:{
        afterrender: function(){
            this.getPicker().el
            .down("div.x-datepicker-footer")
            .down('a.x-btn')
            .dom
            .onclick = function(){
                console.log('hooked');
            };
        }
    }
}

Answer 3

渲染日期字段后，您可以从日期选择器对象获取todayBtn并更改其处理程序。下面的示例显示了如何将“今天”操作更改为“昨天”：

jsfiddle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 22
    buildToolsVersion "23.0.0"

    defaultConfig {
        applicationId "edu.drexel.cs.ptn32.pennapps"
        minSdkVersion 14
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
    }

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_7
        targetCompatibility JavaVersion.VERSION_1_7
    }

    signingConfigs {
        debug {
            storeFile file("debug.keystore")
        }
    }

    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

    packagingOptions {
        exclude 'META-INF/DEPENDENCIES.txt'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/notice.txt'
        exclude 'META-INF/license.txt'
        exclude 'META-INF/dependencies.txt'
        exclude 'META-INF/LGPL2.1'
    }
}

repositories {
    maven {
        // The username and password for this repo is set below
        url 'https://houndify.com/maven/'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.android.support:design:22.2.1'
    compile ('hound.android:hound-sdk:0.2.15@aar'){
        transitive=true
    }

    compile ('hound.android:phrasespotter:1.4.0'){
        transitive=true
    }

}

setHoundifyMavenCredentials("user", "pw")

def setHoundifyMavenCredentials(username, password) {
    for (repo in repositories) {
        if (repo.properties.url.toString().equals("https://houndify.com/maven/")) {
            repo.properties.credentials.username = username
            repo.properties.credentials.password = password
        }
    }
}

Ext.onReady(function() {
  showPanel();
});

showPanel = function() {
  Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 250,
    bodyPadding: 10,
    title: 'Date field with "Yesterday" button',
    items: [{
      xtype: 'datefield',
      anchor: '100%',
      fieldLabel: 'Date',
      format: 'Y/m/d',      
      value: Ext.Date.subtract(new Date(), Ext.Date.DAY, 1),
      listeners: {
        render: function(dateField) {
          var picker = dateField.getPicker(),
            yesterday = Ext.Date.subtract(new Date(), Ext.Date.DAY, 1),
            selectYesterday = function() {
              this.setValue(yesterday);
              this.fireEvent('select', this, this.value);
              this.onSelect();
            };
          picker.todayBtn.setText('Yesterday');
          picker.todayBtn.setTooltip(Ext.String.format('{0} (Spacebar)',
            Ext.Date.format(yesterday, dateField.format)));
          picker.todayBtn.setHandler(selectYesterday, picker);
          picker.eventEl.addKeyListener(Ext.EventObject.SPACE, selectYesterday, picker);
        }
      }
    }]
  });
}