How to get record from delegated event in EXTJS? - extjs

Question

How to get the record of selected grid row in EXTJS modern toolkit, but when listeners uses delegated event?
I added appropriate listener in grid component, and that provides information about selected div, but this is comppletelly useless unless the onformation which record is clicked in known.
In classic tolkit there is something like 'record,data' and 'recordIndex', but I don't see anything similar on modern toolkit.
var store = Ext.create('Ext.data.Store', {
fields: [{
name: 'name1',
type: 'string'
}, {
name: 'name2',
type: 'string'
}],
data: [{
name1: 'John',
name2: 'Smith',
}],
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
height: 700,
items: [{
xtype: 'grid',
cls: 'grid',
//rowLines: false,
height: 700,
store: store,
columns: [{
text: '',
xtype: 'templatecolumn',
cell: {
encodeHtml: false
},
tpl: new Ext.XTemplate(
'<div class="grid-box">',
'<div class="name">{name1}</div>',
'<div class="name">{name2}</div>',
'</div>',
),
flex: 1
}],
listeners: {
click: {
element: 'element',
delegate: 'div.grid-box',
fn: function (a, b, c) {
debugger;
console.log(a, b, c);
}
}
}
}]
});
CSS
.grid .x-show-selection > .x-listitem.x-selected {
background-color: pink;
}
.grid .x-show-selection > .x-listitem.x-selected {
background-color: pink;
}
.grid .x-listitem {
background-color: #a9f1ad;
}
.grid-box {
background: #fff;
border: 1px solid #cbd2d6;
padding: 15px;
height: 100%;
}
.grid .x-gridcell-body-el {
padding: 5px 0px 5px 10px;
}
.name {
font-size:22px;
line-height:22px;
}

Answer 1

Store recordId in wrapper div attribute and read it in tap handler:
var store = Ext.create('Ext.data.Store', {
fields: [{
name: 'name1',
type: 'string'
}, {
name: 'name2',
type: 'string'
}],
data: [{
name1: 'John',
name2: 'Smith',
}, {
name1: 'Muster',
name2: 'Mustermann',
}],
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
height: 700,
items: [{
xtype: 'grid',
cls: 'grid',
//rowLines: false,
height: 700,
store: store,
columns: [{
text: '',
xtype: 'templatecolumn',
cell: {
encodeHtml: false
},
tpl: new Ext.XTemplate(
'<div class="grid-box" recordId={id}>', // Store recordId in div attribute
'<div class="name">{name1}</div>',
'<div class="name">{name2}</div>',
'</div>',
),
flex: 1
}],
listeners: {
click: {
element: 'element',
delegate: 'div.grid-box',
fn: function (a, b, c) {
var grid = Ext.getCmp(this.id),
store = grid.getStore(),
record = store.getById(b.getAttribute('recordId'))
console.log(record.getData());
}
}
}
}]
});