JSP dont show values correctly from Database - oracle

Question

In mi web application i have a combo with options including the more than or less than symbols. When you open the combo looks ok, but when you select it look wrong (pic 1). Only i want to show both correctly, when you open the combo and when you select.
The < symbol is extracted from Oracle DB. I used UTF-8 codification and ISO-8859-1, but doesn't work.
JSP: <%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
Table where values are extracted
------------------
|ID_VALOR | RTO |
|----------------|
| 1 | < 2h |
| 2 | < 8h |
------------------
Query
#NamedQueries({
#NamedQuery(name = "RangoTemporal.getAll", query = "SELECT tt FROM RangoTemporal tt ORDER BY tt.id ASC")
})
EDIT: Added the code that creates de dropdown. (extJS - Javascript)
// creamos el combo de RTO
var storeRTO = new Ext.data.SimpleStore({
fields: [
{name: 'ID_RTO'},
{name: 'desRTO'}
]
});
var dataRTO = [
[
'',
'<bean:message key="label.gi.procesos.tabs.rtoProceso.automatico"/>'
]
<logic:iterate name="gestionInventariosForm" property="tiposRangoML" id="rto" indexId="index">
<c:if test="${index >= 0}">, </c:if>
[
'<bean:write name="rto" property="id"/>',
'<bean:write name="rto" property="descripcion"/>'
]
</logic:iterate>
];
// create the data store
storeRTO.loadData(dataRTO);
function dameComboRTO(){
var comboRTO = new Ext.form.ComboBox({
store: storeRTO,
fieldLabel:'<bean:message key="label.gi.procesos.tabs.rtoProceso"/>',
displayField:'desRTO',
valueField: 'ID_RTO',
typeAhead: true,
forceSelection: true,
mode: 'local',
triggerAction: 'all',
emptyText:'',
selectOnFocus:true,
editable: true,
id: 'RTO_PROCESO',
<logic:notEqual value="0" name="gestionInventariosForm" property="proceso.id">
value:'<bean:write name="gestionInventariosForm" property="proceso.rtoProceso.id" />',
</logic:notEqual>
<logic:equal value="0" name="gestionInventariosForm" property="proceso.id">
value: '',
</logic:equal>
disabled: false,
hiddenName: 'proceso.rtoProceso.id',
anchor:'80%',
listeners:{
select:{fn:function(combo){
document.getElementById( 'RTO_PROCESO_ID' ).value = combo.getValue();
}}
}
<logic:equal value="0" name="gestionInventariosForm" property="puedeEditar">,readOnly:true,fieldClass: 'NoEditable'</logic:equal>
});
return comboRTO;
}

Answer 1

I founded the answer here http://www.sencha.com/forum/showthread.php?99826-Special-chars-problem-resolved-into-Combobox-TextField-Loading-Form-and-other-Apps
Only i overrided the extjs config adding this lines:
htmlDecode : function(value){
return !value ? value : String(value).replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"').replace(/"/g, '"').replace(/'/g, "'");
};
And modifying the code a little with convert: function(v){return Ext.util.Format.htmlDecode(v);}. So finally my code is:
var storeRTO = new Ext.data.SimpleStore({
fields: [
{name: 'ID_RTO'},
{name: 'desRTO', convert: function(v){return Ext.util.Format.htmlDecode(v);}}
]
});
now it looks right.