Каков наилучший способ избежать HTML в приложении ExtJS?
Я разрабатываю веб-приложение, использующее ExtJS для создания графического интерфейса и общения с сервером через веб-службу RESTful (возвращаемые данные форматируются как объекты JSON).
Теперь у меня возникают проблемы при обработке данными, содержащими HTML-теги, коды Javascript внутри; потому что, когда я устанавливаю эти значения в формы Ext, метки, поля ввода, на них влияют эти синтаксисы.
Я использовал эту функцию для загрузки данных из объекта модели в форму:
form.loadRecord(model);
Я нашел решение для выхода из HTML и JS: используя
field.setValue(Ext.util.Format.htmlDecode(data));
но я думаю, что это не очень хорошее решение для всего приложения, потому что разработчики должны делать так много всего: просмотрите все поля ввода, метки и поставьте для них этот фрагмент. И в конце концов, это не прекрасный способ построить быстрое, надежное и поддерживаемое приложение.
Итак, не могли бы вы помочь мне в решении, чтобы его можно было изменить в одном месте и повлиять на остальных. Могу ли я переопределить setValue/setLabel AbstractComponent? Или я должен кодировать данные перед их рендерингом? И как декодировать эти данные?
(P/S: я использую структуру Grails на стороне сервера)
Большое вам спасибо.
Ответы
Ответ 1
Все зависит от вашего варианта использования, но то, что я делаю, - избегать всех HTML-кодов на стороне сервера, чтобы по ошибке не было забытых мест. Это, конечно, создает проблемы, когда эти данные необходимо загружать в поля формы, потому что они экранированы.
Самое простое решение - переопределить setValue для всех полей формы и использовать функцию Extjs htmlDecode, которая вернет эти значения в нормальное состояние.
Ext.override(Ext.form.field.Base, {
setValue: function(val) {
val = Ext.util.Format.htmlDecode(val);
return this.callParent([val]);
}
});
Ответ 2
Если вы используете Ext.XTemplate, вы можете избежать html в таких полях:
var tpl = new Ext.XTemplate(
'<p>My Field: {myField:htmlEncode}</p>'
);
Ответ 3
Эта ссылка имеет отличный ответ от jack.slocum:
https://www.sencha.com/forum/showthread.php?13913
grid.on('validateedit', function(e){
e.value = Ext.util.Format.stripTags(e.value);
});
Ответ 4
Я знаю, что этот вопрос старый, но для публикации в будущем:
ответ опубликовал ny Janis Coders, но он выглядит как break the date.
Просто потратил 1 час на дебаггирование этой проблемы, подумал, что я упоминаю ее здесь.