Блог

Как получить запись выбранной строки сетки в современном инструментарии EXTJS, но когда слушатели используют делегированное событие? Я добавил соответствующий прослушиватель в компонент сетки, и он предоставляет информацию о выбранном div, но это совершенно бесполезно, если только не известна информация, на которую нажата запись. В классическом толките есть что-то вроде «запись,данные» и «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;
}
 

Храните идентификатор записи в атрибуте 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());
                }
            }
        }
    }]
});