PDA

View Full Version : Event Delegation in DataView TemplateI



Bucs
16 Mar 2011, 6:12 AM
I'll try to keep this short. I have a dataview that lists product items in a cart, and I have an html "Remove Item" input button that is injected into each row via the template. I already have a listener on the itemtap of the dataview row to slide in the details. I added the button to remove an item from the cart and I'm trying to use event delegation to attach a listener to the button to have it only fire the removal code, and not allow it to propagate back up to the itemtap. However, the itemtap fires before the handler attached to the button fires. I can check the target className inside the itemtap event and make it work, but is this the right way to do this? I'd like to attach the listener directly to the button and then use stopEvent to keep it from bubbling up, but not sure why itemTap fires first. What am I missing here?

Also, the stopEvent() call doesn't seem to be "stopping" anything, not sure why.

Code:


tpl: new Ext.XTemplate(
.....
'<div class="cartRemoveArea"><input class="cartRemoveButton" type="button" value="Remove Item"></div>',
.....
),
itemSelector: 'div.productlist_item_container',
selectedItemCls: 'itemSelected',
listeners: {
el: {
click: this.tapHandler,
delegate: 'input' <== Have tried 'cartRemoveButton' here as well, same result
},
itemtap: function (dv, index, item, e) {
var ds = dv.getStore();
rec = ds.getAt(index);

// This works, but doesn't feel like the right way to do it
if (e.target.className == 'cartRemoveButton') {
alert('Button clicked')
}
else {
alert('Product Item clicked');
}
}
}
},
......

tapHandler: function (e, t) {
e.stopEvent();
alert('Button clicked');
},



Thanks for any help!