ExtJS 4.2.1 - проверка настраиваемого поля формы

Я работаю над формой, которая содержит панель сетки с моделью выбора флажков для выбора пользователей. После отправки идентификаторы пользователей (а также другие значения полей формы) отправляются на сервер. Это работает идеально.

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

настраиваемое поле формы - сетка пользователей с моделью выбора флажка

Как вы можете видеть на изображении, есть заголовок (сделанный xtype: label), затем пустое место, которое в настоящее время заполнено меткой без текста (область, отмеченная красным прямоугольником) и сама сетка. Если я выбираю пользователя (или нескольких), их имена (пустые данные) отображаются в этой пустой метке.

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

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

grid.getSelectionModel().getSelection().length > 0 ? true : false

поэтому я знаю, является ли выбор действительным или нет, но я не знаю, как отобразить этот значок ошибки и где мне лучше всего его отобразить. Я думаю, что лучшая позиция для этого значка должна быть внутри метки заголовка раздела (слева или справа, это не имеет большого значения).

Любая помощь в том, как отобразить этот значок, очень ценится!


extjs extjs4 extjs4.2 extjs-form
person shadyyx    schedule 26.08.2013    source источник
comment
Ваш вопрос касается отрисовки значка и сообщения (например, HTML-разметка, CSS, как создать это с помощью Ext и т. д.) или реализации логики проверки (компоненты, слушатели, лучшие практики и др.)? Или оба?   -  person rixo    schedule 26.08.2013
comment
@rixo В основном отображение этого значка с подсказкой к сообщению. Тем временем я его наконец-то реализовал, но, может быть, вы могли бы предложить лучшее решение, которое я приму. Логика проверки уже сделана и работает.   -  person shadyyx    schedule 26.08.2013

Ответы (1)


arrow_upward
2
arrow_downward

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

Итак, после проверки

if(grid.getSelectionModel().getSelection().length > 0) {
    // valid, let's submit the form...
} else {
   // invalid, let's show the error hint
}

Мне нужно только обратиться к конкретной метке и установить для нее текст — при добавлении конкретной HTML-разметки, которая совпадает с отображением значка ошибки при вызове form.isValid():

label.setText(myPreviousText
    + '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="&lt;ul class=&quot;x-list-plain&quot;&gt;&lt;li role=&quot;alert&quot;&gt;'
    + 'MY ERROR MESSAGE'
    + '&lt;/li&gt;&lt;/ul&gt;" style="display: inline-block;"></span>', false);

Теперь у меня есть значок ошибки со стилизованной подсказкой. Я устанавливаю текст метки обратно (возвращаю к действительному) в событии grid.select и снова проверяю действительность в событии grid.deselect.

person shadyyx    schedule 27.08.2013