web-dev-qa-db-fra.com

Comment ajouter un écouteur d'événements en double-clic lors de l'extension d'un panneau de grille avec Ext.define ()?

J'étends GridPanel avec Ext.define () (Ext v4).

J'ai besoin d'obtenir les données de la ligne lorsqu'une ligne de la grille est double-cliquée. À ce stade, je ne peux même pas faire fonctionner l'écouteur d'événements:

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


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

Qu'est-ce qui ne va pas ici?

Si quelqu'un a besoin de réponse, c'est la bonne manière:

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-itemdblblick

javascriptextjsgridpanelextjs4
17
Petrunov

Vous n'avez pas besoin de mettre l'auditeur dans le viewconfig. Voici ma configuration de travail:

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

Une autre chose est que vous semblez avoir utilisé Ext.grid.GridPanel dans la propriété d’extension. Mais dans la documentation, c'est Ext.grid.Panel. Mais même avec gridpanel, tout semble bien fonctionner. 

Je suggérerais d’utiliser les termes d’ext JS 4, car cela pourrait entraîner une rupture d’application ultérieurement dans les versions 4.x.

Maintenant, si vous utilisez la nouvelle architecture MVC, vous souhaiterez déplacer ces actions vers le contrôleur plutôt que vers la vue. Vous pouvez vous reporter au guide MVC Architecture pour plus de détails.

24
Abdel Raoof

Avec l'approche MVC dans ExtJS 4, il existe un autre moyen intelligent de définir de tels gestionnaires. Quelques exemples de code:

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();
  }
});
2
ctp
listeners: {
        select: 'xxxx',

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