javascript - Ext-JS 快速提示图标 CSS 问题

Question

我创建了一个自定义 vtype 来验证我的电子邮件，我的 TO 字段使用 exclamation.jpg 图标，但我希望我的 CC 和 BCC 字段使用警告图标(因为它不是必需的)。我一直在尝试围绕导航 Ext-JS 的 API 来确定我可以访问哪些属性(我是否可以访问 VType 扩展自的属性？)，以及我需要在哪里指定它。

我通过 firebug 看到无效消息使用 css 类 .x-form-invalid-msg，我怎么能告诉它查看不同的 CSS 类(查看 firebug 我不知道要引用什么 ID)？我可以使用 cls: 属性吗？或者我可以使用 Ext.get 并调整 cls 属性吗？

编辑**

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

编辑**

所以看起来将 invalidClass 属性添加到 CC 文本框会导致 CC 类反射(reflect)更改，但 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 类的字段的 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 属性中包含“your-special-class”，它包含文本字段及其(通常隐藏的)无效内容消息。
• 当显示无效消息时，上面的 CSS 选择器比 Ext 的 CSS 样式表中的简单 .x-form-invalid-msg 选择器更具体地应用于它，因为它指定了无效的消息元素本身以及包含它的 DIV 的类。
• 更具体地说，在您的 CSS 规则中指定的 background-image 属性会覆盖其在 Ext 样式表中的对应属性，因此现在使用您的背景图像而不是 Ext 默认主题中的背景图像。