Ext-JS Иконка QuickTip 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 в ЦК Textbox вызывает класс 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.' 
      } 
     ); 

---

EDIT ** Эй я понял это после того, как глядя @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. 
}] 

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

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