PDA

View Full Version : addListener delegate not working



mom_vincent
27 Feb 2012, 3:57 AM
I've a grid panel where one of the columns is an XTemplate type. I'm trying to add a listener to this, my code is thus:


columns: [
...
{
xtype: 'templatecolumn',
text: 'Approve2',
flex: 1,
dataIndex: 'Approved',
align: 'center',
sortable: false,
tpl: '<input type="checkbox" class="approveCheckbox" />'
},
...
],
afterrender: function (){
this.on('itemclick', this.storeCheckboxVal, this, { delegate: 'input.approveCheckbox' });
},
storeCheckboxVal: function (view, record, item, index, event) {
alert(record.data['ID']);
}

However this does not work.

If I add the listener on the initComponent option it will trigger BUT it triggers for any item clicked. How do I get it to only trigger on the XTemplate column (or HTML elements with a certain class)?

mitchellsimoens
27 Feb 2012, 6:01 AM
Try this:


this.mon(this.el, {
scope : this,
delegate : '...',
itemclick : function() {...}
});

mom_vincent
27 Feb 2012, 6:39 AM
Nope, nothing seems to happen. I've added it like so:


afterrender: function () {
this.mon(this.el, {
scope: this,
delegate: '.approveCheckbox',
itemclick: function () { alert('woo'); }
})
},

Is it perhaps because the input element is not an ExtJS object?

mitchellsimoens
27 Feb 2012, 6:43 AM
No, that is what delegate is doing, adding a listener to the element. Try click instead of itemclick.

mom_vincent
27 Feb 2012, 6:49 AM
No dice. I've even tried removing the delegate property and yet it still doesn't trigger.


afterrender: function () {
this.mon(this.el, {
scope: this,
//delegate: '.approveCheckbox',
click: function () { alert('woo'); }
})
},


I'm using a MVC pattern, would that make a difference to how the code should be?

sskow200
27 Feb 2012, 7:16 AM
You may need to wait until the GridView is rendered. If this is an event you want to work at more of a global level rather than grid specific you can try something like this...



Ext.getBody().on('click', function(evt, target){
alert('Testing');
}, null, {delegate: 'input.approveCheckbox'});



One problem you're definitely having is that your delegates do not have an 'itemclick' event. Input elements only utilize a 'click' event.

sskow200
27 Feb 2012, 7:29 AM
You may also want to try changing the way you're using 'afterrender' to something like this...



Ext.create('Ext.grid.Panel', {
afterRender: function() {
this.callParent(arguments);
this.on('click', this.onItemClick, this, {delegate: 'input.approveCheckbox'});
},
onItemClick: function() {
console.log(this);
}
});

mom_vincent
27 Feb 2012, 9:31 AM
I solved it with this solution: http://stackoverflow.com/questions/3203872/ext-js-on-click-event

F (http://stackoverflow.com/questions/3203872/ext-js-on-click-event)rom there on it was a case of adapting it to be triggered when an item is clicked.