ExtJS / Sencha-добавить кнопку в 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?

спасибо.

7
extjs javascript

5 ответов

попробуйте что-то вроде этого:

{
    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);
    }
}

Это очень зависит от реализации, но это работает. И вы должны отметить его таким образом, что он не будет отображать еще одну кнопку clear каждый раз, когда вы нажимаете на триггер.

4

вы можете получить ссылку на элемент ВН.сборщик.Дата компонент (ответственный за отображение всплывающего окна календаря) с DateField getPicker() метод. Затем вы можете настроить текст Today кнопка с параметром config todayText и настроить, что происходит, когда он нажимается, переопределяя selectToday() метод.

(Если вы хотите сохранить Today кнопка, как есть, и добавить другую кнопку вместо этого, это может быть сделано тоже, путем расширения / настройки Ext.picker.date, но это немного сложнее.)

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

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

Обновлено

its made-вот код: http://publikz.com/?p=1223

3

Если кто-то ищет решение в 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, '');
        }
    });

Рабочая Скрипка ExtJS

0