2013-08-27 9 views
10

Sto sviluppando un'applicazione Web che utilizza ExtJS per creare GUI e comunicare con il server tramite il servizio web RESTful (i dati restituiti sono formattati come oggetti JSON).
Ora si verificano problemi durante l'elaborazione con dati che contengono tag HTML, codici JavaScript all'interno; perché quando imposto questi valori su moduli Ext, etichette, campi di input, sono influenzati da tali sintassi.
Ho usato questa funzione per caricare i dati dal modello a oggetti di forma:Qual è il modo migliore per sfuggire HTML sull'applicazione ExtJS in generale?

form.loadRecord(model); 

ho trovato una soluzione per sfuggire HTML e JS: usando

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

ma penso che non è una buona soluzione per l'intera applicazione, perché gli sviluppatori devono fare così tante cose: rivedere tutti i campi di input, le etichette e inserirvi tale frammento. Dopotutto, non è un modo meraviglioso per costruire un'applicazione veloce, robusta e manutenibile.
Quindi, potresti aiutarmi a trovare una soluzione in modo che possa essere modificata in un unico posto e influire sul resto. Posso sovrascrivere setValue/setLabel di AbstractComponent? O dovrei codificare i dati prima di renderli? E come decodificare questi dati? (P/S: I utilizza il framework Grails sul lato server) Grazie mille.

risposta

6

Tutto dipende dal tuo caso d'uso, ma quello che faccio è: sfuggire tutto il codice HTML sul lato server, in modo che non ci siano posti "dimenticati" per errore. Ovviamente questo crea problemi, quando questi dati devono essere caricati nei campi del modulo, perché sono sfuggiti. La soluzione più semplice è sovrascrivere setValue per tutti i campi modulo e utilizzare la funzione Extjs htmlDecode, che ripristinerà questi valori alla normalità.

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

Sembra che la soluzione sopra spezzi il campo della data, almeno lo fa in ExtJS 4.2. Un leggero miglioramento sarebbe quello di verificare se il valore è una stringa prima di provare a decodificare HTML. Quindi, in questo modo: \t setValue: function (val) { \t \t if (typeof 'stringa' val ==) { \t \t \t val = Ext.util.Format.htmlDecode (val); \t \t} \t \t return this.callParent ([val]); \t} – Rocket04

10

Se stai usando Ext.XTemplate, si può sfuggire HTML in campi come questo:

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

So che questa domanda è vecchio, ma la pubblicazione di riferimento futuro:

la risposta postata ny Janis Coders funziona, ma sembra che interrompa il selezionatore del data. Ho appena trascorso 1 ora a risolvere questo problema, ho pensato di parlarne qui.

+0

Vedere il mio commento sotto la sua risposta, è una soluzione piuttosto semplice. – Rocket04

1

Questo collegamento ha una risposta eccellente da jack.slocum: https://www.sencha.com/forum/showthread.php?13913

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

metodo Util Ext.util.Format.stripTags() rimuove tutti i tag html/script.

Problemi correlati