+2!
In order to overcome Ext's poor behaviour around html encoding, we wrote a load of overrides so that you can fix it, for example:
Code:
/**
* Html escape values for rendering, converting the empty value to non-breaking space to prevent rendering problems (e.g. in ComboBox dropdown)
*/
escapeRenderer: function(value) {
if (value === undefined || value === null) {
value = '';
}
else {
value = String(value);
}
if (!value) {
return '\u00A0';
}
return Ext.util.Format.htmlEncode(value);
},
/**
* Html escape for rendering as escapeRenderer does, but also convert new line characters to <br/> tags.
*/
messageRenderer: function(value) {
return Ext.util.Format.nl2br(Acme.escapeRenderer(value));
},
/**
* If you put "foo <bar> baz" into a combobox's display field then it will correctly display as "foo <bar> baz"
* in the text box portion when selected, but in the dropdown appears as "foo baz" as here the data is considered as html not text.
* Fix this inconsistency by html escaping display value in dropdown.
* Note that the implementation of this only applies where a custom tpl config setting is not provided, if you provide one
* you are responsible for escaping (and indeed might not want to so as to display custom html rendering).
*/
escapeComboBoxDropdowns: function() {
if (!escapeComboBoxDropdownsCalled) {
// We add in our custom function BEFORE the normal initList.
Ext.form.ComboBox.prototype.initList = function() {
if (!this.tpl) {
this.tpl = new Ext.XTemplate('<tpl for="."><div class="x-combo-list-item">{' + this.displayField + ':this.messageRenderer}</div></tpl>');
this.tpl.messageRenderer = Acme.messageRenderer;
}
}.createSequence(Ext.form.ComboBox.prototype.initList);
escapeComboBoxDropdownsCalled = true;
}
},
You then specify which patches you want in your project's main.js (or whatever you call it):
Code:
Acme.ext.Patch.escapeComboBoxDropdowns();
Acme.ext.Patch.escapeGrids();
Acme.ext.Patch.escapeTreeNodes();
...