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

Question

如何在EXTJS modern toolkit中获取选定网格行的记录，但是当监听器使用委托事件时？我在网格组件中添加了适当的侦听器，它提供了有关所选 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,
        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

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

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

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

How to get record from delegated event in EXTJS?

extjs

delegates

grid