Блог

Я хотел бы добавить средство выбора даты в текстовое поле как часть построителя выражений. Например. вы можете ввести что-то вроде:

date <= │ (где │ находится курсор)

затем щелкните триггер календаря, и когда выбрана дата, попросите его вставить дату в курсор:

date <= 2019-04-23│

Я посмотрел, как реализовано средство выбора даты, и там много материала, который мне пришлось бы скопировать.

Итак, тогда я думал о том, чтобы объединить скрытое поле даты, что-то вроде этого:

 Ext.create('Ext.form.Panel', {
    title: 'Expression Builder',
    width: 400,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Expression',
        allowBlank: true,
        triggers: {
            calendar: {
                cls: 'x-fa fa-calendar',
                handler: function (me) {
                    var itemId = me.id   '-aux-datefield';
                    var datefield = Ext.ComponentQuery.query('#'   itemId)[0] ||
                    Ext.create({
                        itemId: itemId,
                        xtype: 'datefield',
                        hideLabel: true,
                        floating: true,
                        renderTo: me.getEl(),
                        alignTarget: me.id,
                        defaultAlign: 'tr-tr'
                    });
                    datefield.onTriggerClick();
                }
            }
        }
    }]
});
  

Дело в том, что если поле даты скрыто с помощью hidden: true , то средство выбора не будет отображаться. Используя что-то хитрое вроде style: 'display: none' , средство выбора выравнивается по верхнему левому краю окна просмотра. Измените maxHeight и maxWidth на что-нибудь маленькое, и размер поля даты изменится.

Это всего лишь одна из многих проблем, связанных с обработкой событий, вставкой курсора, уничтожением поля и т.д. так что работы тоже будет много.

Мне интересно, делал ли кто-нибудь что-то подобное, и, может быть, есть более простой способ?

Что-то вроде этого? :

     Ext.application({
        name: 'Fiddle',
        launch: function () {

            var myPicker = Ext.create('Ext.picker.Date', {
                renderTo: Ext.getBody(),
                floating: true,
                defaultAlign: 't-b',
                minDate: new Date(),
            });

            Ext.create('Ext.form.Panel', {
                title: 'Expression Builder',
                width: 500,
                bodyPadding: 100,
                renderTo: Ext.getBody(),
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Expression',
                    width: 300,
                    allowBlank: true,
                    triggers: {
                        calendar: {
                            cls: 'x-fa fa-calendar',
                            handler: function (me) {
                                var text = this
                                myPicker.handler =  function (picker, date) {
                                        text.setValue(text.getValue()   ' '   Ext.Date.format(this.getValue(), 'd/m/Y'));
                                        this.hide();
                                };
                                myPicker.showBy(this);

                            }
                        }
                    }
                }]
            });
        }
    });
  

Другим решением было бы расширить Ext.form.field.Сборщик, взгляните на Ext.form.field.Установите дату, чтобы увидеть, как это делается.

Или скопируйте исходный код для поля даты, см. Документ API, в свой собственный компонент, поскольку в нем есть необходимые компоненты для средства выбора, стиля, форматирования и т.д. Затем вы можете удалить проверку даты и форматирование даты.