Ext-JS Quicktip图标CSS问题

Question

I've created a custom vtype to verify my emails, my TO field uses an exclamation.jpg icon, but I want my CC and BCC fields to use a warning icon (since its not req). I've been trying to wrap my head around navigating Ext-JS's API to determine what attributes I had access to (do I have access to attributes that the VType extends from?), and where I needed to specify this.

I see through firebug the invalid message uses the css class .x-form-invalid-msg, how could I tell it to look at a different CSS class (looking at firebug I don't know what ID to reference)? Could I utilize the cls: attribute? Or Could I utilize an Ext.get and tweak the cls attribute?

EDIT**

I just found the invalidClass Attribute... but I can't seem to get it working. Investigating...

EDIT**

So it looks like adding the invalidClass attribute to the CC Textbox causes the CC class to reflect the change, but the VType Error isn't changing.

---

Code for my vType Below (does vType have a cls: it can use?):

 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** Hey I figured it out after looking @Jollymorphic explanation. My CSS had the extra problem that these textboxes were in form elements. I applied the CSS rule to the ID's of the fields that contained the x-form-invalid class. So it looks similar to this.

 #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

You could use the cls configuration property to attach a custom CSS class to each of the components whose invalid icons you want to change, and then add a rule to your CSS stylesheet along these lines:

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

The textfields would look like this:

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

The end result is this:

• Each of your special text fields includes "your-special-class" in the class attribute of the DIV that contains both the textfield and its (normally hidden) invalid contents message.
• When the invalid message is shown, the CSS selector above applies to it more specifically than the simple .x-form-invalid-msg selector in Ext's CSS stylesheet because it specifies both the class of the invalid message element itself as well as the class of the DIV that contains it.
• Being more specific, the background-image attribute specified in your CSS rule overrides its counterpart in the Ext stylesheet, so that your background image is now used instead of the one from the Ext default theme.