JSP dont show values correctly from Database

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(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/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.