Окно редактирования и создания записи Grid
 

Всем привет!

Пытаюсь создать Window, в котором редактировалась бы выбранная строка таблицы.
Нашел вот такой пример:
http://examples.sencha.com/extjs/6.2...-child-session

Все бы замечательно, только есть одно но... там на 2 view используется один и тот же viewController, а создается окно так:

this.dialog = view.add({
            xtype: 'binding-child-session-form',
            viewModel: {
                data: {
                    title: record ? 'Edit: ' + record.get('name') : 'Add Company'
                },
            },
        });

        this.dialog.show();
    },

Кнопка отмены в окне вызывает другую ф-цию этого же ViewController:

onCancelClick: function () {
        this.dialog = Ext.destroy(this.dialog);
    },

Почему этого же? Есть вот такой комментарий там же в коде:

/**
 * This form is a popup window used by the ChildSession view. This view is
 * added as a contained window so we use the same ViewController instance.
 */

При переносе подобного кода к себе в приложение столкнулся с тем, что окно создается лишь поверх таблицы, а не поверх всего приложения/viewport'а, как мне нужно. Выкрутился так:

var main = Ext.ComponentQuery.query('app-main')[0];
this.dialog = main.add({

Также прописал себе во view окна тот же ViewController, т к по умолчанию он лез за функциями в main ViewController:

controller: 'employees',

Только вот теперь при закрытии окна `this.dialog` у меня `undefined` и обратиться к созданному диалогу я не знаю как. Можно нагородить еще ComponentQuery, но хочется нормального приятного решения. Сенча по умолчанию предлагает создать ViewController еще и для окна и часть кода разместить там.

Можно ли решить проблему, используя лишь один ViewController как в примере, на который я дал ссылку?

Попробуйте в первом примере сделать окно модальным.

А оно итак модальное. В конфиге Window указано:

modal: true,

А при создании с xtype вся конфигурация и вызывается.

Наконец добрался поковырять код и понять, почему эта конструкция у вас не срабатывает. А не работает она потому, что для плавающих компонентов маску создаёт ZIndexManager, который не учитывает наличие даже чуть нетривиальных случаев. У меня давно висит тикет переделать этот механизм на использование LoadMask, но руки пока не добрались.

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

...
    var win = new MyApp.view.GridWindow();

    Ext.getBody().mask();
    win.show();
...

    Ext.getBody().unmask();
    win.close();

А какую проблему решает данный код? Ведь если мы создаем форму через new или create, она итак будет поверх body.

Сейчас я упростил код до такой конструкции:

this.dialog = Ext.create({
    xtype: 'employees-window',

Работает как нужно, только окно так и НЕ является дочкой Grid'а, что я хочу реализовать.