Маска для элементов TabPanel
 

Всем привет!

Есть панель с вкладками, в каждой вкладке находится по таблице. Пытаюсь сделать маску на каждый item-таблицу, получилось только через событие afterrender, т к у GridPanel нет в конфигах маски:

defaults: {
    listeners: {
        afterrender: function(grid) {
            grid.mask();
        }
    }
},

Однако есть интересная проблема. Т к у нас activeTab может быть только один, то и срабатывает событие лишь на активной вкладке. Переключаем вкладку — опять срабатывает на новой вкладке.
Мне же нужно, чтобы маска применилась на всех элементах разом и при загрузке.

У самой TabPanel нет события afterrender, а с added и перебором в цикле элементов-табов маска не применяется и вываливается с ошибкой:

TypeError: target is undefined

Так как же правильно применить маску?

Правильно применить маску - это не применять маску. Да, именно так. Когда стор грузится, грид автоматически маскируется. Ну и не понятно насчет маскировки одновременно во всех табах. Зачем? Ведь активен, и соответственно виден только один таб за раз. Что происходит в остальных и так никто не узнает. А когда таб активизировался то и делайте в нем все что надо.
Или я что-то недопонял?

Объясняю. У меня две таблицы с ассоцияциями (FK), при нажатии на строку 1й таблицы грузятся данные с фильтром по id этой записи во 2й таблице.
Однако по умолчанию 2я таблица при загрузке активна и если мы нажмем на кнопку обновления в pagingtoolbar'е, то получим ВСЕ записи, связанные и не связанные. К тому же, кнопки toptoolbar'а также все активны...

Чтобы избежать ненужных нажатий пользователем и несвязанных данных, я маскирую таблицы. Можно, конечно, отключить саму TabPanel, но это выглядит менее эстетично, чем маска на Grid'ах. Да и вкладки остаются видимы и доступны с маской.

Стало понятнее ) Мне кажется что маска тут неправильное решение. Поставьте подчиненному гриду disabled. Будут заблокированы тулбары и пейджер.

Как ни странно, решение с отключением самой таблицы делает неактивными и сами вкладки TabPanel. В итоге имеем идентичный вид, как если бы мы просто отключили сам TabPanel (монолитно серая отключенная панель).

Вот же хитрая бестия ) Ну попробуйте панель в панели: одна панель как сам таб, а в ней - гридпанель. Думаю должно помочь.

Честно сказать, глубоко не вчитывался, многабукаф. Fiddle было бы существенно нагляднее.

Однако имею сказать вот что:

а) Не используйте afterrender в Classic toolkit ни за что и никогда. От слова "вообще". Это событие стреляет сразу после добавления свежесозданных элементов в DOM, до раскладки. Делать что-либо с DOM в этот момент - самый лучший путь к "тяжёлым и тормозным приложениям Ext JS". Используйте событие boxready, оно стреляет после раскладки.*

б) Есть мнение, что конфиг maskElement может оказаться интересным.

ц) По умолчанию карты в Tab panel рендерятся поодиночке после активации, сделано это экономии ради и производительности для. Конфиг deferredRender позволяет управлять этим поведением.

* Кроме компонентов, использующих браузерную раскладку (liquidLayout: true). Таких компонентов в Classic Toolkit немного: кнопки и поля ввода, кроме текстовых полей с grow: true. Если liquidLayout == true, то событие boxready не стреляет и придётся использовать afterrender. Но лучше не надо, потому что принудительные браузерные раскладки убьют всю производительность на корню.

nohuhu, Спасибо за разъяснения.

В общем, я заморочился и сделал Fiddle (1й раз в нем работал):
https://fiddle.sencha.com/#fiddle/1mls

По умолчанию оба зависимых Grid'а маскируются по событию boxready, но вкладки при этом доступны. По событию rowclick главного Grid маска снимается, но работает это только для активной вкладки!

defferedRender: false мне не помог (в фидле есть эта строчка), а с maskElement не понял как работать.

Fiddle вижу, спасибо. А как должно работать-то? При решении любой задачи всегда полезно знать ответ. :)

Ну вообще желательно такое поведение:
1. Маска накладывается на ВСЕ элементы TabPanel один раз.
2. При выборе строки 1го Grid все маски снимаются.

Как сейчас происходит:
1. По событию boxready каждый раз накладывается маска на АКТИВНЫЙ элемент TabPanel.
2. При выборе строки 1го Grid снимается маска ТОЛЬКО У АКТИВНОГО элемента (событие rowclick), а при переключении на 2-ю вкладку маска остается, т к срабатывает boxready (п. 1).