How to get rowIndex in extjs widget column

Question

I need a button in a widget column to know its rowIndex in an ExtJS 6 panel.grid, so that on button click it can use that functionality. I know I can pull that information from the renderer function, but that seems to execute before the button has been created. Any ideas on how I can get the index?

Answer 1

Use the onWidgetAttach

A function that will be called when a widget is attached to a record. This may be useful for doing any post-processing.

http://docs.sencha.com/extjs/5.1.2/api/Ext.grid.column.Widget.html#cfg-onWidgetAttach

The function has both widget and record parameter. You can do widget.record = record, and then the button will have the record member which you can access in the click listener

Answer 2

Use indexOf on the gridview. You need to pass it the node as argument, which is the HTML element representing the row. In Ext JS 6, grid rows are HTML tables, so the button's row element can be found from the button element b as b.el.up('table'). The gridview can also be found as b.up('gridview'). So you get:

var rowIndex = b.up('gridview').indexOf(b.el.up('table'));

See in action: https://fiddle.sencha.com/#fiddle/snq

Answer 3

Building on Drake's answer, I'm using the event.record property instead. Unfortunately, it looks like you have to make the click event have a slight buffer, so it gets the proper record added to it. This works, but I'm not entirely sure if it's a proper way. Example:

{
  width: 150,
  xtype: 'widgetcolumn',
  widget: {
    text: 'Button',
    xtype: 'button',
    text: 'Get row index',
    listeners: {
      buffer: 1,
      click: function(button, event, eOpts) {
        var record = event.record;
        alert(store.find('postid', record.get('postid'), 0, false, true, true))
      }
    }
  }
}