ExtJS 4 - El evento de desenfoque de cuadro combinado se dispara dos veces

4

Tengo un cuadro combinado simple con un evento de desenfoque. El evento de desenfoque tiene una alerta llamada con fines de prueba actualmente.

El problema es que este evento de desenfoque se dispara dos veces de la siguiente manera:

  1. Si el cursor está en este cuadro combinado y el usuario presiona la tecla 'tabulación' debido a que el cuadro combinado pierde el enfoque -> se activa el evento de desenfoque.

  2. Una vez que el cuadro combinado ha perdido el foco, si un usuario hace clic con el mouse en cualquier lugar de la pantalla, el evento de desenfoque se activa nuevamente.

¿Hay alguna forma de que este evento de desenfoque pueda dispararse solo una vez?

A continuación se muestra el código completo que estoy usando:

<html>
    <head>
        <title>Test Page</title>
         <link rel="stylesheet" type="text/css" href="ext-4.0.2a/resources/css/ext-all.css">
         <script type="text/javascript" src="ext-4.0.2a/bootstrap.js"></script>

         <script type='text/javascript'>

            Ext.onReady(function(){

                Ext.define("Post", {
                    extend: 'Ext.data.Model',
                    fields: [
                        {name: 'id', mapping: 'post_id'},
                        {name: 'title', mapping: 'topic_title'},
                        {name: 'topicId', mapping: 'topic_id'},
                        {name: 'author', mapping: 'author'},
                        {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
                        {name: 'excerpt', mapping: 'post_text'}
                    ]
                });

                ds = Ext.create('Ext.data.Store', {
                    pageSize: 10,
                    proxy: {
                        type: 'jsonp',
                        url : 'http://www.sencha.com/forum/topics-remote.php',
                        reader: {
                            type: 'json',
                            root: 'topics',
                            totalProperty: 'totalCount'
                        }
                    },
                    model: 'Post'
                });

                panel = Ext.create('Ext.panel.Panel', {
                    renderTo: Ext.getBody(),
                    title: 'Search the Ext Forums',
                    width: 600,
                    bodyPadding: 10,
                    layout: 'anchor',
                    items: [{
                        xtype: 'combo',
                        store: ds,
                        displayField: 'title',
                        fieldLabel:'Blur Test',
                        listeners:{
                            blur:function(){
                                alert('1');
                            }
                        }
                    }, {
                        xtype: 'component',
                        style: 'margin-top:10px',
                        html: 'Live search requires a minimum of 4 characters.'
                    }]
                });
            });
         </script>
    </head>
    <body>

    </body>
</html>

Gracias por la ayuda de antemano.

PD: Estoy usando ExtJS versión 4.0.2ay he comprobado este comportamiento en Firefox, IE9 e IE8. Todos ellos están disparando dos veces. Pero cuando se marca en Chrome, el evento se activa solo una vez.

10
  • 1
    jsfiddle.net/ZkqP8 Parece que no puedo replicar el problema. ¿Qué navegador y versión de ExtJS 4 estás usando? 13/10/11 a las 9:20
  • Gracias por la publicación RWilliams. He actualizado mi pregunta con la versión y los detalles del navegador. Además, verifiqué el enlace de violín compartido por usted y allí descubrí que el evento de desenfoque no se dispara ni una sola vez. ¿Está disparando solo una vez en su caso? Para mí, no se disparó en absoluto en el enlace del violín.
    netemp
    13/10/11 a las 9:24
  • Sé que está usando ExtJS versión 4, pero es 4.0.2, 4.0.2a, 4.0.6, etc. 13/10/11 a las 9:27
  • Me está disparando muy bien. No utilicé una alerta como lo hizo usted, ya que se considera una mala juju para la depuración de JavaScript. Tendrás que usar las consolas javascript de Firebug o Chrome o IE para verlo disparar. 13/10/11 a las 9:29
  • ¿Puede proporcionar más de su código ExtJS? Es posible que esté vinculando varios eventos de desenfoque a ese combo. 13/10/11 a las 9:37
0

Una opción (MUY TERRIBLE) es crear una variable para rastrear su recuento borroso:

var AlreadyBlurred = false; //Obviously you want to put this somewhere NOT global

A continuación, puede hacer esto en su listenersobjeto:

listeners: {
    blur: function (){
        if(!AlreadyBlurred)
        {
            // Do your code here
        }
        AlreadyBlurred = !AlreadyBlurred;
    }
}

Una vez más, esta es una idea muy terrible, ya que probablemente enmascara un problema en su código o en el propio Ext. La actualización a 4.0.7 no parece ayudar (la última versión de jsfiddle muestra que esto aún sucede). ¿Por qué disparar sobre el evento borroso, por curiosidad? ¿Podría hacerlo al cambiar o seleccionar en su lugar el resultado deseado?