ExtJS Quicktip图标CSS问题

Question

我创建了一个自定义的vtype来验证我的电子邮件，我的to字段使用了一个惊呼.jpg图标，但我希望我的CC和BCC字段使用一个警告图标(因为它不是req(。我一直在努力浏览Ext-JS的API，以确定我可以访问哪些属性(我是否可以访问VType扩展的属性？(，以及我需要在哪里指定这些属性。

我通过firebug看到无效消息使用了css类.x-form-invalid-msg，我怎么能告诉它看另一个css类(看着firebug，我不知道该引用哪个ID(？我可以使用cls:attribute吗？或者我可以使用Ext.get并调整cls属性吗？

编辑**

我刚刚找到invalidClass属性。。。但我似乎无法让它工作。正在调查。。。

编辑**

因此，将invalidClass属性添加到CC文本框中似乎会导致CC类反映更改，但VType Error没有更改。

---

下面是我的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.'
             }
        );

---

编辑**嘿，我是在看了@Jollymmorphic的解释后才明白的。我的CSS有一个额外的问题，即这些文本框是表单元素。我将CSS规则应用于包含x-form-invalid类的字段的ID。所以它看起来和这个相似。

#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选择器比Ext的CSS样式表中的简单.x-form-invalid-msg选择器更具体地应用于它，因为它指定了无效消息元素本身的类以及包含它的DIV的类
• 更具体地说，CSS规则中指定的background-image属性覆盖了Ext样式表中的对应属性，因此现在使用的是背景图像，而不是Ext默认主题中的背景图像