How to add row double click event listener when extending grid panel with Ext.define()?

Question

I am extending GridPanel with Ext.define() (Ext v4).

I need to get the row data when a grid row is double clicked. At this point I cannot even get the event listener working:

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


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

What is wrong here?

If anyone needs the answer- this is the right way:

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

Is it listeners should part of GridPanel or SelectonModel, you hide it in viewConfig — bensiu, Apr 22 '11 at 02:24
I'm following this post: http://hutten.org/bill/extjs/2011/03/extjs-4-pr3---how-to-get-doubl.html — Petrunov, Apr 22 '11 at 02:33

score 26 · Accepted Answer · answered Apr 22 '11 at 06:48

26

You don't need to put the listener in the viewconfig. Here is my working configuration:

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

Another thing is, you seems to have used Ext.grid.GridPanel in the extend property. But in documentation it's Ext.grid.Panel. But even with gridpanel, everything seems to work fine.

I would suggest to use the Ext JS 4 terms as it might cause to application breakage later in other 4.x versions.

Now, if you are using the new MVC architecture, you will want to move these actions to the controller rather than the view. You can refer to the MVC Architecture guide for details.

answered Apr 22 '11 at 06:48

Abdel Raoof Olakara

19,223
11
88
133

Thank you for the tips - it works this way for me as well. Changed my code to exctend grid.Panel. I was following the example at http://hutten.org/bill/extjs/2011/03/extjs-4-pr3---how-to-get-doubl.html and it was using viewConfig.. perhaps I am missing something? – Petrunov Apr 22 '11 at 07:32
@Petrunov, you are not missing something.. i think the writer of hutten.org is doing a mistake "In ExtJS 4.0 you NEED to listen for events on the GridPanel’s view, VIA the “viewConfig”"... this is wrong.. – Egy Mohammad Erdin Apr 22 '11 at 07:44
Btw, I tried adding the listeners directly to the panel on my own but it didn't worked - perhaps becase I was trying with events like 'dblclick' and 'rowdblclick' - couldn't find 'itemdblclick' on my own :/ – Petrunov Apr 22 '11 at 07:58
@Edo.. I think you are in some misunderstanding. Where did you read "In ExtJS 4.0 you NEED to listen for events on the GridPanel’s view, VIA the viewConfig"? Have a look at the events of View and Panel in docs. – Abdel Raoof Olakara Apr 22 '11 at 08:02
@Petrunov, yup.. that could be a reason it didn't work for you. try your code with itemdbclick in viewconfig and let us know the result... – Abdel Raoof Olakara Apr 22 '11 at 08:04
Ok Abdel, I was just trying your example and on itemdblclick I did alert(record) - it was undefined. Then I moved the listeners back to viewConfig as you suggested in the latest comment, but this time with the right 'itemdblclick' event - now record is an object. – Petrunov Apr 22 '11 at 08:26

score 2 · Answer 2 · answered May 11 '11 at 15:39

With the MVC approach in ExtJS 4 there's another smart way too to define such handlers. Some example 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();
  }
});

With this approach, howto you handle override listener ? I mean, how about if you get some problem like on [this](http://stackoverflow.com/questions/7730552/howto-override-listener-in-gridpanel-on-extjs4) thread ? — martinusadyh, Oct 17 '11 at 15:13

score 0 · Answer 3 · answered Jun 21 '17 at 15:27

0

listeners: {
        select: 'xxxx',

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

answered Jun 21 '17 at 15:27

works

1

3

Welcome to SO, posting a code as an answer might not be very useful without explanation. Could you edit your answer to had some explanation? You might be interested to read [how to write a good answer](https://stackoverflow.com/help/how-to-answer) and take the [tour](https://stackoverflow.com/tour). – Nuageux Jun 21 '17 at 16:00

How to add row double click event listener when extending grid panel with Ext.define()?

3 Answers3