如何从 EXTJS 中的委托事件获取记录？

如何解决如何从 EXTJS 中的委托事件获取记录？

如何在EXTJS现代工具包中获取选定网格行的记录，但是当侦听器使用委托事件时？我在网格组件中添加了适当的侦听器，它提供了有关所选 div 的信息，但这完全没用，除非知道单击记录的信息。在经典的 tolkit 中，有类似“record,data”和“recordindex”之类的东西，但我在现代工具包中没有看到类似的东西。

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,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,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;
}

解决方法

在包装器 div 属性中存储 recordId 并在点击处理程序中读取它：

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