2013-08-27 10 views
10

Ich entwickle eine Webanwendung mit ExtJS, um GUI zu erstellen und mit dem Server über RESTful Web-Service zu kommunizieren (die zurückgegebenen Daten werden als JSON-Objekte formatiert).
Jetzt habe ich Probleme bei der Verarbeitung mit Daten, die HTML-Tags, Javascript-Codes im Inneren enthält; denn wenn ich diese Werte auf Ext-Formulare, Labels, Eingabefelder setze, sind sie von diesen Syntaxen betroffen.
habe ich diese Funktion Daten aus Modellobjekt zu Form laden:Was ist der beste Weg, HTML auf ExtJS-Anwendung im Allgemeinen zu entkommen?

form.loadRecord(model); 

ich eine Lösung HTML und JS gefunden habe, zu entkommen:

mit
field.setValue(Ext.util.Format.htmlDecode(data)); 

aber ich denke, das ist keine gute Lösung für die ganze Anwendung, weil die Entwickler so viele Dinge tun müssen: Überprüfen Sie alle Eingabefelder, Beschriftungen und legen Sie diesen Ausschnitt zu. Und schließlich ist das kein schöner Weg, um eine schnelle, robuste und wartbare Anwendung zu erstellen.
Also, könnten Sie bitte mir helfen Lösung, so dass es an einer Stelle geändert werden kann, und wirkt sich auf den Rest aus. Kann ich setValue/setLabel von AbstractComponent überschreiben? Oder sollte ich die Daten vor dem Rendern codieren? Und wie man diese Daten entschlüsselt? (P/S: Ich benutze Grails Framework auf der Serverseite) Vielen Dank.

Antwort

6

Alles hängt von Ihrem Anwendungsfall ab, aber was ich tue, ist - entgehen Sie dem gesamten HTML-Code auf der Serverseite, so dass es aus Versehen keine "vergessenen" Orte gibt. Das schafft natürlich Probleme, wenn diese Daten in Formularfelder geladen werden müssen, weil sie maskiert sind. Die einfachste Lösung besteht darin, setValue für alle Formularfelder zu überschreiben und die Extjs htmlDecode-Funktion zu verwenden, die diese Werte wieder auf normal zurücksetzt.

Ext.override(Ext.form.field.Base, { 
    setValue: function(val) { 
     val = Ext.util.Format.htmlDecode(val); 
     return this.callParent([val]); 
    } 
}); 
+2

Es scheint, dass die obige Lösung das Datumsfeld bricht, zumindest in ExtJS 4.2. Eine kleine Verbesserung wäre, vor dem Versuch, HTML zu dekodieren, zu prüfen, ob der Wert eine Zeichenkette ist. So, wie folgt aus: \t setValue: function (val) { \t \t if (typeof val == 'string') { \t \t \t val = Ext.util.Format.htmlDecode (val); \t \t \t Rückgabe this.callParent ([val]); \t} – Rocket04

10

Wenn Sie Ext.XTemplate verwenden, können Sie HTML in Bereichen wie diese entkommen:

var tpl = new Ext.XTemplate(
    '<p>My Field: {myField:htmlEncode}</p>' 
); 
0

Ich weiß, diese Frage ist alt, aber für die Zukunft der Veröffentlichung:

die Antwort gepostet ny Janis Coders funktioniert, aber es scheint zu brechen das Datefield Picker. Nur 1 Stunde debugging dieses Problem, dachte ich würde es hier erwähnen.

+0

Siehe meinen Kommentar unter seiner Antwort, es ist eine ziemlich einfache Lösung. – Rocket04

1

Dieser Link hat eine ausgezeichnete Antwort von jack.slocum: https://www.sencha.com/forum/showthread.php?13913

grid.on('validateedit', function(e){ 
 
    e.value = Ext.util.Format.stripTags(e.value); 
 
});

Util Methode Ext.util.Format.stripTags() entfernt alle HTML/Script-Elementen.

Verwandte Themen