Question

我有一个DateField：

  editor : new Ext.form.DateField({ /*Ext.ux.form.Custom*/
      allowBlank: true,
      format: 'm/d/Y',
      width : 120,
      enableKeyEvents: true,
      listeners: {
              'keydown' : function (field_, e_  )  {
                field_.onTriggerClick();
                e_.stopEvent();
                return false;
          },
              'focus' : function (field_  )  {
                field_.onTriggerClick();
                e_.stopEvent();
                return false;
          }
      }
  })

禁用此字段的编辑。在任何编辑中，它显示弹出窗口，因此任何清除日期都是不可能的。有没有办法添加弹出窗口类似按钮今天，但意味着清除，此后该字段中的日期将重置为00.00.00？

感谢。

Answer 1

尝试这样的事情：

{
    xtype: 'datefield',
    onTriggerClick: function() {
        Ext.form.DateField.prototype.onTriggerClick.apply(this, arguments);
        var btn = new Ext.Button({
            text: 'Clear'
        });
        btn.render(this.menu.picker.todayBtn.container);
    }
}

它非常依赖于实现，但它确实有效。并且您必须标记它，以便每次单击触发器时都不会呈现另一个清除按钮。

Answer 2

您可以使用DateField的Ext.picker.Date方法引用getPicker()组件（负责显示日历弹出窗口）。然后，您可以使用配置选项todayText自定义Today按钮的文本，并通过覆盖selectToday()方法自定义单击它时发生的情况。

（如果你想保持Today按钮，并添加另一个按钮，也可以通过扩展/自定义Ext.picker.date来完成，但它有点复杂。）

Answer 3

calendar = .....  // find the calendar component 

clearDateButton = new Ext.Button({
    renderTo: calendar.el.child("td.x-date-bottom,true"),
    text: "Clear Date",
    handler: ......
})

Answer 4

更新

它的制作 - 这里是代码： http://publikz.com/?p=1223

Answer 5

如果有人在ExtJS 4中搜索小型解决方案，我的建议是：

Ext.picker.Date.override({
        beforeRender: function() {
            this.clearBtn = new Ext.button.Button({
                text: 'Clear',
                handler: this.clearDate,
                scope: this
            });
            this.callOverridden(arguments);
        },
        initComponent: function() {
            var fn = function(){};
            var incmp = function(values, out){
                Ext.DomHelper.generateMarkup(values.$comp.clearBtn.getRenderTree(), out);
                fn(values, out);
            };
            if(this.renderTpl.length === undefined){
                fn = this.renderTpl.initialConfig.renderTodayBtn;
                this.renderTpl.initialConfig.renderTodayBtn = incmp;
            } else {
                fn = this.renderTpl[this.renderTpl.length-1].renderTodayBtn;
                this.renderTpl[this.renderTpl.length-1].renderTodayBtn = incmp;
            }
            this.callOverridden(arguments);
        },
        finishRenderChildren: function () {
            this.clearBtn.finishRender();
            this.callOverridden(arguments);
        },
        clearDate: function(){
            this.fireEvent('select', this, '');
        }
    });

Working ExtJS Fiddle

ExtJS / Sencha - 添加按钮到DateField弹出窗口，以清除日期

5 个答案: