CODEWITHSUNDEEP
javascriptextjsgridpanelextjs4
Petrunov
Petrunov

Reputation: 774

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

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

Upvotes: 19

Views: 48686

Answers (3)

works
works

Reputation: 1

listeners: {
        select: 'xxxx',

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

Upvotes: 0

ctp
ctp

Reputation: 1087

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();
  }
});

Upvotes: 2

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

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.

Upvotes: 26

Related Questions