Question

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

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

编辑**

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

编辑**

所以看起来将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类的字段的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.
}]

最终结果如下：

每个特殊文本字段在class的{{1}}属性中包含“your-special-class”，其中包含textfield及其（通常隐藏的）无效内容消息。
当显示无效消息时，上面的CSS选择器比Ext的CSS样式表中的简单DIV选择器更具体地应用它，因为它既指定了无效消息元素本身的类，也指定了类的包含它的.x-form-invalid-msg。
更具体地说，CSS规则中指定的DIV属性会覆盖Ext样式表中的对应属性，以便现在使用背景图像而不是Ext默认主题中的背景图像。

Ext-JS Quicktip Icon CSS问题

1 个答案: