Баг контрола filefield
 

Коллеги, столкнулся с багом контрола выбора файла filefield.
Баг заявлен тут. Судя по всему его исправили в 6.0.1, но получить эту версию по GPL нельзя. Баг воспроизводится в Хроме 48.0.2564.109. В ИЕ11 не воспроизводится.
Собственно проблема - при клике по полю или его лейблу (focus на контейнер контрола) вся форма (panel) съезжает вверх. Если сразу нажать на выбор файла, то всё ок. Визуально получается вот так:
http://img.prntscr.com/img?url=http:...om/L0VeA48.png

Кто-нибудь решал подобную проблему? Или есть предложение какого-нибудь воркэраунда?

Спасибо.

Вот код формы:

Ext.define("ImportTemplates.view.main.Main", {
    extend: "Ext.form.Panel",
    xtype: "form-fileuploads",
    controller: "form-fileuploads",

    border: 0,
    bodyStyle: "background:transparent;",

    defaults: {
        layout: "anchor"
    },

    items: [
        {
            xtype: "form",
            frame: true,
            bodyPadding: "10 10 0",
            reference: "firstForm",

            defaults: {
                anchor: "100%",
                allowBlank: false,
                msgTarget: "side",
                labelWidth: 80
            },

            items: [
                {
                    xtype: "datefield",
                    fieldLabel: "Дата старта",
                    format: "d.m.Y",
                    name: "dob",
                    allowBlank: false,
                    maxValue: new Date()
                }, {
                    xtype: "filefield",
                    fieldLabel: "Файл",
                    name: "photo-path",
                    buttonText: "",
                    buttonConfig: {
                        icon: "resources/excel.gif"
                    }
                }, {
                    xtype: "combobox",
                    reference: "operators",
                    fieldLabel: "Оператор",
                    displayField: "operator",
                    store: {
                        type: "operators"
                    },
                    queryMode: "local",
                    minChars: 0,
                    typeAhead: true
                }
            ],

            buttons: [
                {
                    text: "Загрузить",
                    handler: "firstFormSave"
                }, {
                    text: "Очистить",
                    handler: "firstFormReset"
                }
            ]
        }
    ]
});

А в фидле можете воспроизвести? Я попытался, не вышло. Заодно вопрос: зачем вы вкладываете форму в форму?

Воспроизвести изменение ДОМ-структуры? Затрудняюсь. Если подскажете, как :)

Насколько я понял, воспроизводится, когда панель с контролом внутри ещё какой-нибудь структуры (у меня в JQUI-диалоге). И опять же - в ИЕ тоже не воспроизводится.

Дело в том, что приложение вызывается из другого нагруженного версткой веб-приложения, в котором не поддерживается глубокая кастомизация и прикручивание внешних интерфейсов. Если конкретно, то из интерфейса MS Dynamics CRM. Подсунуть в него Ext напрямую, думаю нереально. Даже банальная подгрузка JQUI вызывает множество
подводных камней, а что уж говорить про ExtJS.

Я помню, что менял стили файлового поля, но конкретно этот баг не помню. Пыщ. Надо пофиксить.

Если у вас нет доступа к 6.0.1, то изменения SASS вам наверное и ни к чему. Используйте вот такой CSS хак в Chrome:

input.x-form-file-input {
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

И тоже повторю вопрос Infarch: зачем у вас внешний контейнер наследуется от Ext.form.Panel, если вы вкладываете в него ещё один контейнер с xtype: form? Точнее, зачем вообще нужен внешний контейнер? Это классический пример излишней структуры.

nohuhu,
Спасибо за рекомендации и разъяснения.
К сожалению предложенный хак не решил проблему :(. Пробовал и с !important и собственным именем класса. Результат по клику на filefield тот же самый: сползает вверх.

Также проникся по поводу контейнеров. Честно говоря, это мой первый проект на ExtJS, поэтому что-то частично копипастилось с открытых примеров . Несколько переделал. Так корректнее?

Ext.define("ImportTemplates.view.main.Main", {
    extend: "Ext.container.Container",
    xtype: "container",

    defaults: {
        xtype: "panel",
        controller: "panel",
        frame: true,
        bodyPadding: 10,
        layout: "anchor"
    },

    items: [
        {
            defaults: {
                anchor: "100%",
                allowBlank: false
            },

            items: [
                {
                    xtype: "datefield",
                    name: "startdate",
                    reference: "startdate",
                    fieldLabel: "Дата старта",
                    format: "d.m.Y",
                    maxValue: new Date()
                }, {
                    xtype: "combobox",
                    name: "operators",
                    reference: "operators",
                    fieldLabel: "Оператор",
                    displayField: "operator",
                    store: {
                        type: "operators"
                    },
                    queryMode: "local",
                    minChars: 0,
                    typeAhead: true
                }, {
                    xtype: "filefield",
                    name: "myfile",
                    reference: "myfile",
                    fieldLabel: "Файл",
                    buttonText: "",
                    buttonConfig: {
                        icon: "resources/excel.gif"
                    }
                }
            ],

            buttons: [
                {
                    text: "Загрузить",
                    handler: "firstFormSave"
                }, {
                    text: "Очистить",
                    handler: "firstFormReset"
                }
            ]
        }, {
            title: "Результат обработки",
            height: 200,
            collapsed: true,
            collapsible: true,
            scrollable: true,
            html: "Текст",
            tools: [
                { type: "save" }
            ]
        }
    ]
});

Рабочий "хак" найден! :victory:
Спасибо всем за помощь и идеи.

.z-filefield { pointer-events: none; }
.z-filefield-but { pointer-events: all; }

xtype: "filefield",
name: "myfile",
reference: "myfile",
fieldLabel: "Файл",
buttonText: "",
cls: "z-filefield",
buttonConfig: {
    icon: "resources/excel.gif",
    cls: "z-filefield-but"
}

ЗЫ: и кажется я понял, о каком фидле шла речь. Сначала про "фидлер" подумал :D

А вот вам кстати и наглядная демонстрация бага на сайте производителя! :lol: Кликаем в разных точках, сразу под надписью "Photo:" на третьей сверху панельке "File Upload Form". В Хроме ;).

Проверьте, что нужные стили применились к полю. Попробуйте руками их применить в отладчике и протестируйте. У меня баг воспроизводился при фокусировании file field после фокусирования последнего поля, с исправленным CSS эффект пропадал. Если стили применяются, но поле всё равно прыгает, опишите подробнее сценарий.

В 6.0.1+ этот баг не проявляется, потому что я менял CSS для других целей и случайно пофиксил эту проблему тоже. Бывает. :)

С pointer-events: none аккуратнее, проверьте что работает как нужно во всех браузерах. С Firefox периодически бывают проблемы на эту тему. Лучше всего такие хаки применять к конкретному браузеру и через правила с высокой специфичностью, чтобы не создавать себе лишних проблем.

Не совсем. Я в прошлый раз просмотрел, что у вас во внешнем контейнере есть не только форма, а ещё и панель с результатами обработки, и решил, что внешний контейнер лишний. Поправляюсь: в данном случае внешний контейнер нужен, но делать его формой смысла нет. Я бы оставил внешний контейнер обычной панелью, а форму с полями формой.

В принципе разница между Ext.panel.Panel и Ext.form.Panel небольшая, особенно если вы не используете встроенные механизмы загрузки и отправки формы. С другой стороны, какой смысл их не использовать?