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

[Sogl]

nohuhu, Посмотрите?

[nohuhu]

Sogl,

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

Если я правильно понял ваше последнее сообщение, то вам нужно закрыть маской всю TabPanel изначально, до момента, пока не выбрана запись в Grid с левой стороны. В таком случае, почему бы не использовать привязку (binding) к выбранной записи в 1-м Grid, точно так же, как вы делаете во втором Grid? У каждого компонента есть метод setLoading, так что можно сделать вот такую привязку:

bind: {
    loading: '{!customerGrid.selection.orders}'
}

Это не решит вопрос с изначальным маскированием TabPanel, т.к. bindings стреляют только в момент обновления. Для этого как раз подойдёт событие boxready на самой TabPanel:

listeners: {
    boxready: function(panel) {
        panel.setLoading({ useMsg: false });
    }
}

Я подправил и сохранил ваш fiddle, можете посмотреть вживую. Если что-то работает не так, как надо, уточните задачу.

[Sogl]

Не поздно =)

Если я правильно понял ваше последнее сообщение, то вам нужно закрыть маской всю TabPanel изначально, до момента, пока не выбрана запись в Grid с левой стороны.

Не так. Должны маскироваться элементы items этой TabPanel, а не вся панель. Таким образом остается возможность пользоваться вкладками, но поменять в них ничего нельзя, пока не нажмешь на строку 1-й Grid.

Попробовал перенести ваш код в секцию defaults, но маска с элементов так и не снимается.

Еще так и не понял как работает вот такая запись и почему в ней стоит оператор логического НЕ:

bind: {
    loading: '{!customerGrid.selection.orders}'
}

p.s. Кстати, Sencha Fiddle не показывает внесенные сторонние изменения в созданных fiddle? А то так сложно понять что было изменено.

[nohuhu]

Не так. Должны маскироваться элементы items этой TabPanel, а не вся панель. Таким образом остается возможность пользоваться вкладками, но поменять в них ничего нельзя, пока не нажмешь на строку 1-й Grid.

В таком случае надо использовать maskElement: 'body', чтобы маска накладывалась на элемент body, а не основной el. См. fiddle.

bind: {
    loading: '{!customerGrid.selection.orders}'
}

Это частично ошибочная строка, я второпях зачем-то использовал ассоциацию не на выбранную запись в customerGrid, а на данные в этой записи. Прошу прощения за конфуз. :) Должно выглядеть вот так:

bind: {
    loading: '{!customerGrid.selection}'
}

Ассоциация customerGrid.selection публикуется компонентом customerGrid и содержит выделенную запись в customerGrid. С левой стороны у нас название "config", который нужно изменить, когда меняется ассоциация. "Config" в кавычках, потому что на самом деле у компонентов нет опции loading, которую можно было бы сконфигурировать, но есть метод setLoading, который можно вызвать. Binding всё равно, конфиг это или нет, оно дёрнет метод и скормит ему данные из ассоциации, когда эти данные изменяются.

Дальше к оператору. Когда выделенных записей нет, нужна маска. Когда запись есть, маска не нужна - обратная логическая связь. Когда выделение есть, свойство customerGrid.selection содержит объект с выделенной записью. Когда выделения нет, это свойство равно null. Использованием логического НЕ мы убиваем двух зайцев: во-первых, инвертируем логическую связь в нужную нам сторону (есть запись - нет маски, и наоборот); во-вторых, приводим truthy объект "запись" к булевому значению true, или null к булевому false. Если бы нам нужна была прямая связь, то я бы использовал '{!!customerGrid.selection}', просто чтобы в метод setLoading передавалось всегда булевое значение, а не запись. Меньше потенциальных поводов для головной боли.

p.s. Кстати, Sencha Fiddle не показывает внесенные сторонние изменения в созданных fiddle? А то так сложно понять что было изменено.

Нет, такое Fiddle пока не умеет.

[Sogl]

nohuhu, Огромное спасибо!

Теперь все работает как надо. Изначально я пытался маскировать каждый item в TabPanel и снимать маску со всех них по rowclick, а оказалось, что проще всего выставить maskElement: 'body' и не нужны никакие лишние телодвижения. Красота.

Есть один непонятный момент.

Как я понял из вашего описания и доки, вот эта запись:

listeners: {
    boxready: function(panel) {
        panel.setLoading({ useMsg: false });
    }
},

выставляет маску без сообщения на ней (т к useMsg: false) перед загрузкой контейнера и после раскладки элементов DOM. Вы выше писали, что bind срабатывает только на обновление.

По идее, без данного кода маска примениться не должна. Однако, без него вечно отображаться "Loading..." пока не кликнем на строку Grid, т е каким-то образом стандартная маска появляется. Почему?

Фидл с этим моментом:
https://fiddle.sencha.com/#fiddle/1mls

Комментирую код c bind, возвращая boxready на место — все ОК, маска есть. Без этих 2х кусков кода никаких масок, что и должно быть.

[nohuhu]

"Loading..." это сообщение по умолчанию, если вызвать просто setLoading(true). В какой-то момент стреляет binding и, поскольку выделенной записи нет, накладывает маску с сообщением. Мне показалось, что это выглядит довольно странно, поэтому я добавил обработчик boxready, чтобы снова установить маску, но уже без сообщения.

Вообще-то это скорее хак, но setLoading() не поддерживает конфигурацию маски на объекте, только в параметрах, поэтому приходится явно вызывать функцию, чтобы передать ей этот параметр.

А если подумать, такая конфигурация была бы хорошей идеей. EXTJS-23472. :)