PDA

View Full Version : XTemplate button with onclick



ByteLess
2 Apr 2014, 7:58 AM
Can someone please tell me what is incorrect in my code below?
Error is
addToCart is not defined
My code looks like
Ext.define('Home.view.invDataView', { extend: 'Ext.view.View',
alias: 'widget.invDataView',


requires: [
'Ext.XTemplate'
],


height: 562,
itemId: 'invDataView',
itemSelector: 'div.ticket-wrapper',
store: 'InventoryStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
itemTpl: [
'<tpl for".">',
' <div class="ticket-wrapper">',
' <span class="title">{item_number} ({cavid})</span>',
' <span class="description">{item_description}</span>',
' <span><input type="button"itemid="AddCart" name="AddCart" value="Add to Cart" onclick="AddToCart(\'{item_number}\',1)"></span>',
' </div>',
'</tpl>'
]
});


me.callParent(arguments);
},


addToCart: function(partno, qty) {
console.log(partno,qty);
}


});

firefoxSafari
2 Apr 2014, 10:07 AM
I think it's a scope issue. When the onclick handler fires, it is looking for a method named AddToCart in the global scope. It doesn't know about the member function you defined for your class. A quick and dirty solution would be to move the method definition outside your class definition into the global scope. Alternatively, you could listen for the afterrender event and then use Ext dom query methods to setup the events and set the scope they'll run in.

ByteLess
2 Apr 2014, 11:35 AM
I think its something to do with the onclick I tried to moved the function on top level, outside the class definition and had the same error, I left the function on both places and still same issue.What other alternate that I can use if not need to use onclick, what else I can use to achieve the same?I have a button add to cart which I need to take the id and send to my function.

skirtle
2 Apr 2014, 11:56 AM
The correct way to do this is a delegated listener, not an inline onclick property. The official documentation for delegate is under the on method of Ext.dom.Element.

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-on

Further reading in this general area:

http://skirtlesden.com/articles/html-and-extjs-components