javascript - ¿Cómo agregar el detector de eventos de doble clic de fila al extender el panel de cuadrícula con Ext.define()?

extjs gridpanel

Question

Estoy extendiendo GridPanel con Ext.define () (Ext v4).

Necesito obtener los datos de la fila cuando se hace doble clic en una fila de la cuadrícula. En este punto ni siquiera puedo hacer que el detector de eventos funcione:

Ext.define(''Application.usersGrid'', {
extend: ''Ext.grid.GridPanel'',
alias: ''widget.usersgrid'',


viewConfig: {
    listeners: {
        dblclick: function(dataview, index, item, e) {
            alert(''dblclick'');
        }
    }
},
...

¿Que esta mal aquí?

Si alguien necesita la respuesta, esta es la manera correcta:

Ext.define(''Application.usersGrid'', {
extend: ''Ext.grid.Panel'',
alias: ''widget.usersgrid'',


viewConfig: {
    listeners: {
        itemdblclick: function(dataview, record, item, index, e) {
            alert(''itemdblclick'');
        }
    }
},
...

http://dev.sencha.com/new/ext-js/4-0/api/Ext.grid.GridView#event-itemdblclick

Answer 1

Con el enfoque de MVC en ExtJS 4, también hay otra forma inteligente de definir dichos manejadores. Algún código de ejemplo:

Ext.define(''App.controller.Documents'', {

  extend: ''Ext.app.Controller'',
  stores: [''Documents''],
  models: [''Document''],
  views: [
    ''document.List'',
    ''document.Edit'',
    ''document.Preview''
  ],  

  init: function() {

    this.control({

      /*  
       * a cool way to select stuff in ExtJS 4
       */
      ''documentlist'': {
        itemdblclick: this.editDocument
      },  

      /*  
       * simple access to components
       */
      ''documentedit button[action=save]'': {
        click: this.updateDocument
      },  

    }); 

  },  

  editDocument: function(grid, record) {
    var view = Ext.widget(''documentedit'');
    view.down(''form'').loadRecord(record);
  },  

  updateDocument: function(button) {
    var win = button.up(''window''),  // new selection API
        form   = win.down(''form''),  // in ExtJS 4
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
  }
});

Answer 2

No es necesario poner el escucha en el viewconfig. Aquí está mi configuración de trabajo:

listeners : {
    itemdblclick: function(dv, record, item, index, e) {
        alert(''working'');
    }
},

Otra cosa es que parece haber utilizado Ext.grid.GridPanel en la propiedad extend. Pero en la documentación es Ext.grid.Panel . Pero incluso con gridpanel, todo parece funcionar bien.

Yo sugeriría usar los términos Ext JS 4, ya que podría causar la ruptura de la aplicación más adelante en otras versiones 4.x.

Ahora, si está utilizando la nueva arquitectura MVC, deseará mover estas acciones al controlador en lugar de a la vista. Puede consultar la guía de arquitectura MVC para más detalles.

Answer 3

listeners: {
        select: ''xxxx'',

        itemdblclick: function (dv, record, item, index, e) {
            var myBtn = Ext.getCmp(''btnEdit'');
            myBtn.onClick();
        }
    },