Ext-JS Quicktip Icon CSS Frage

Question

Ich habe einen benutzerdefinierten vtype erstellt, um meine E-Mails zu überprüfen, mein TO-Feld verwendet ein exclamation.jpg-Symbol, aber ich möchte meine CC- und BCC-Felder, um ein Warnsymbol zu verwenden (da seine nicht req). Ich habe versucht, meinen Kopf zu wickeln, um Ext-JS-API zu navigieren, um zu bestimmen, welche Attribute ich Zugriff auf hatte (habe ich Zugriff auf Attribute, die die VType erstreckt sich von?), und wo ich brauchte, um dies anzugeben.

Ich sehe durch Firebug die ungültige Nachricht verwendet die CSS-Klasse .x-form-invalid-msg, wie könnte ich es sagen, um eine andere CSS-Klasse zu suchen (Blick auf Firebug ich weiß nicht, welche ID zu verweisen)? Könnte ich das cls: Attribut verwenden? Oder könnte ich ein Ext.get verwenden und das cls-Attribut optimieren?

EDIT**

Ich habe gerade das Attribut invalidClass gefunden... aber ich kann es nicht zum Laufen bringen. Untersuchen...

EDIT**

Es sieht also so aus, dass das Hinzufügen des Attributs invalidClass zum CC-Textfeld dazu führt, dass die CC-Klasse die Änderung widerspiegelt, aber der VType-Fehler ändert sich nicht.

---

Code für meine vType Below (hat vType eine cls: es verwenden kann?):

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, ich habe es herausgefunden, nachdem ich mir @Jollymorphic Erklärung angesehen habe. Mein CSS hatte das zusätzliche Problem, dass diese Textboxen in Formularelementen waren. Ich habe die CSS-Regel auf die IDs der Felder angewendet, die die Klasse x-form-invalid enthalten. Es sieht also ähnlich aus wie hier.

#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

Sie könnten die cls Konfigurationseigenschaft, um eine benutzerdefinierte CSS-Klasse zuzuordnen jede der Komponenten deren ungültige Symbole Sie ändern möchten, und fügen Sie dann eine Regel in Ihr CSS-Stylesheet ein, die diesem Beispiel folgt:

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

Die Textfelder würden wie folgt aussehen:

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

Das Endergebnis ist folgendes:

• Jedes Ihrer speziellen Textfelder enthält "your-special-class" in der class Attribut des DIV die sowohl das Textfeld als auch die (normalerweise verborgene) Meldung über den ungültigen Inhalt enthält.
• Wenn die ungültige Meldung angezeigt wird, gilt der obige CSS-Selektor für sie spezifischer als der einfache .x-form-invalid-msg Selektor im CSS-Stylesheet von Ext, weil er sowohl die Klasse des ungültigen Nachrichtenelements selbst als auch die Klasse des DIV die es enthält.
• Um genauer zu sein, die background-image Attribut, das in Ihrer CSS-Regel angegeben ist, überschreibt sein Gegenstück im Ext-Stylesheet, so dass Ihr Hintergrundbild nun anstelle des Bildes aus dem Ext-Standardthema verwendet wird.