Was verursacht eingekreist! in Sencha ExtJS Beispiel?

Question

Ich versuche, das Verhalten des Sencha ExtJS Beispiel unter dieser URL zu imitieren:

http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#form-contact

Insbesondere zeigen sie den Code, aber ich sehe keinen Ort, der die eingekreisten roten Ausrufezeichen dazu führen, gezogen werden, wenn das Feld benötigt wird.

Ich frage mich auch, ob es eine bessere Möglichkeit gibt, das rote "*" nach jeder Feldbezeichnung zu bekommen. Es sieht so aus, als ob sie den Code für jede Felddefinition wiederholen, die sich für mich wie ein Anti-Muster anfühlt.

*** UPDATE

Per @CD, ist dies, wie das rote Symbol

 defaults: { 
      anchor: '100%', 
      labelStyle: 'font-weight:bold;padding:0;', 
      msgTarget: 'side' 
     }, 

Answer 1

Für das Fehlersymbol einen Blick auf msgTarget: 'side' haben zu erhalten:

Der Ort, an dem der Text der Fehlermeldung angezeigt werden soll. Muss man der folgenden Werte sein:

• qtip Anzeige eine schnelle Spitze die Nachricht enthält, wenn der Benutzer über das Feld bewegt. Dies ist der Standardwert.

  Ext.tip.QuickTipManager.init muss für diese Einstellung zu Arbeit aufgerufen haben.

• Titel Die Nachricht in einem Standard-Browser-Titelattribut-Popup anzeigen.

• unter Fügen Sie ein Block div unter dem Feld mit der Fehlermeldung hinzu.
• side Fügen Sie ein Fehlersymbol rechts neben dem Feld hinzu und zeigen Sie die Nachricht in einem Popup-Fenster bei Hover an.
• keine Keine Fehlermeldung anzeigen. Dies kann nützlich sein, wenn Sie eine benutzerdefinierte Fehleranzeige implementieren.
• [Element-ID] Fügen Sie die Fehlermeldung direkt zu innerHTML des angegebenen Elements hinzu.

---

Zum Hinzufügen der roten "*" versuchen, diese Überschreibung:

Ext.define('Overrides.form.field.Base', { 
    override: 'Ext.form.field.Base', 


    initLabelable: function() { 
     this.callParent(arguments); 

     if (!this.allowBlank) { 
      this.labelSeparator += '<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span>'; 
     } 
    } 

});