Ext-JS Quicktip Icon CSS Вопрос

Question

Я создал пользовательский vtype для проверки своих электронных писем, в моем поле TO используется значок exclamation.jpg, но я хочу, чтобы в моих полях CC и BCC использовался значок предупреждения (так как он не требуется). Я пытался обдумать навигацию по API Ext-JS, чтобы определить, к каким атрибутам у меня был доступ (есть ли у меня доступ к атрибутам, из которых расширяется VType?) И где мне нужно было это указать.

Я вижу через firebug, что недопустимое сообщение использует класс css .x-form-invalid-msg, как я могу сказать ему посмотреть на другой класс CSS (глядя на firebug, я не знаю, какой идентификатор ссылаться)? Могу ли я использовать атрибут cls:? Или я могу использовать Ext.get и настроить атрибут cls?

EDIT **

Я только что нашел атрибут invalidClass ... но я не могу заставить его работать. Исследуя ...

EDIT **

Таким образом, похоже, что добавление атрибута invalidClass в текстовое поле CC приводит к тому, что класс CC отражает изменение, но ошибка VType не меняется.

---

Код для моего vType Ниже (есть ли в vType cls: его можно использовать?):

Ext.apply( Ext.form.VTypes, 
            {
               anEmail:  function(emailString) 
               {
                  var temp = new Array();
                  temp = emailString.split(",");
                  for (var i = 0; i<temp.length; i++)
                  {
                    if (!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(Ext.util.Format.trim(temp[i])))
                    {
                        return false;
                    }
                  }
                  return true;
               } ,
               anEmailText: 'An Email is Required, separated by commas.'
             }
        );

---

РЕДАКТИРОВАТЬ** Эй, я понял это после просмотра @Jollymorphic объяснения. У моего CSS была дополнительная проблема, что эти текстовые поля были в элементах формы. Я применил правило CSS к идентификаторам полей, которые содержали класс x-form-invalid. Так это выглядит примерно так.

#x-form-el-bcc .x-form-invalid-msg{
color: #4279b5;
font: normal 11px tahoma, arial, helvetica, sans-serif;
background-image: url(../images/iwe/shared/warning.gif);
}

#x-form-el-cc .x-form-invalid-msg{
color: #4279b5;
font: normal 11px tahoma, arial, helvetica, sans-serif;
background-image: url(../images/iwe/shared/warning.gif);
}

Answer 1

Вы можете использовать свойство конфигурации cls, чтобы прикрепить пользовательский класс CSS к каждому из компонентов , чьи недопустимые значки вы хотите изменить, и затем добавить правило в таблицу стилей CSS по следующим строкам:

.your-special-class .x-form-invalid-msg
{
   background-image: url("../my-images/my-warning.gif");
}

Текстовые поля будут выглядеть следующим образом:

items: [{
  // ...
  vtype: "yourVType",
  cls: "your-special-class",
  // ...
}, {
  // ...
  vtype: "yourVType",
  cls: "your-special-class",
  // ...
}, {
  // Some other textfield with no special vtype or cls properties.
}]

Конечный результат таков:

• Каждое из ваших специальных текстовых полей включает в себя "your-special-class "в атрибуте class DIV, который содержит как текстовое поле, так и его (обычно скрытое) сообщение о недопустимом содержимом.
• Когда отображается недопустимое сообщение, к нему применяется селектор CSS вышеболее конкретно, чем простой селектор .x-form-invalid-msg в таблице стилей CSS Ext, поскольку он определяет как класс самого недопустимого элемента сообщения, так и класс DIV, который его содержит.
• Будучи более конкретным,Атрибут background-image, указанный в вашем правиле CSS, переопределяет его аналог в таблице стилей Ext, так что теперь фоновое изображение теперь используется вместо oНе из темы Ext по умолчанию.