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

Posted 2023-02-26

【中文标题】如何从 EXTJS 中的委托事件中获取记录？

【英文标题】：How to get record from delegated event in EXTJS?

【发布时间】：2021-06-23 19:24:29

【问题描述】：

如何在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,
        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;

【参考方案1】：

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

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