CODEWITHSUNDEEP
eventsgridextjs4listener
MHTri
MHTri

Reputation: 910

Adding Event Listeners to a class of XTemplate elements in a grid

I've a column of XTemplate cells in a Grid Panel. How do I add a click event/listener that applies to all cells on this particular column? What I've tried so far works but applies to ALL clicks on ANY cell in the grid. I can't seem to manipulate the delegate option to filter for a particular class of element.

My code so far:

columns:[

...

{
    xtype: 'templatecolumn',
    text: 'Approve2',
    flex: 1,
    dataIndex: 'Approved',
    align: 'center',
    sortable: false,
    tpl: '<input type="checkbox" class="approveCheckbox" />'
},

...

],
initComponent: function () {
    this.on('itemclick', this.storeCheckboxVal, this, { delegate: '.approveCheckbox' });
},

...

,
storeCheckboxVal: function (view, record, item, index, event) {
        alert(record.data['ID']);
}

Upvotes: 0

Views: 2470

Answers (3)

MHTri
MHTri

Reputation: 910

Thanks for the replies all, however I've managed to solve my problem via this solution: Ext JS on click event

Upvotes: 0

David Kanarek
David Kanarek

Reputation: 12613

You'll probably need to change your grid's selType to cellmodel. After that, you should be able to listen to the grid view's cellclick. This appears to be undocumented, but I found it using Ext.util.Obersvable.capture(Ext.getCmp('my-grid-id'), console.log) Which is an extremely useful trick to know.

Upvotes: 1

Molecular Man
Molecular Man

Reputation: 22386

AFAIK, delegate works only if you assign handler to DOM Element (not Component). Try this code instead:

initComponent: function () {
    this.mon(this.el, 'click', this.storeCheckboxVal, this, { delegate: '.approveCheckbox' });
},

Upvotes: 2

Related Questions