javascript - How to get rowIndex in extjs widget column - Stack Overflow

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?

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?

• javascript
• extjs
• extjs6

Share Improve this question Follow edited Aug 24, 2015 at 20:01 Tarabass 3,15022 gold badges1919 silver badges3535 bronze badges asked Aug 24, 2015 at 14:12 JonJon 4322 silver badges88 bronze badges 1

• Seems like you're asking the wrong question here. Could you not use the onWidgetAttach template method? – Evan Trimboli Commented Aug 25, 2015 at 0:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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./#fiddle/snq

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

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./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