Results 1 to 4 of 4

Thread: XTemplate button with onclick

  1. #1
    Sencha User
    Join Date
    Oct 2007
    Posts
    256
    Answers
    2

    Default XTemplate button with onclick

    Can someone please tell me what is incorrect in my code below?
    Error is
    Code:
    addToCart is not defined
    My code looks like
    Code:
    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);
        }
    
    
    });

  2. #2
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    459
    Answers
    19

    Default

    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.

  3. #3
    Sencha User
    Join Date
    Oct 2007
    Posts
    256
    Answers
    2

    Default

    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.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    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/#...ment-method-on

    Further reading in this general area:

    http://skirtlesden.com/articles/html...tjs-components

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •