Results 1 to 2 of 2

Thread: How to bind event to inner template element

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2010
    Location
    Italy
    Posts
    44

    Default Answered: How to bind event to inner template element

    Hi,
    I want to bind click event to every <div class="delete-icon"></div>
    It would be great to get in the event callback also the record reference.
    What is the technique to achieve this in SA3?

    Thanks in advance

    Code:
    Ext.define('zeroClickProv.view.templateList', {
        extend: 'Ext.view.View',
        alias: 'widget.templatelist',
    
        controller: 'templatelist',
        viewModel: {
            type: 'templatelist'
        },
        itemSelector: 'div.template-list-item',
        itemTpl: [
            '<tpl for".">',
            '    <div class="template-list-item">',
            '        <div class="left-icon"></div>',
            '        <div>',
            '            <span class="title">{name}</span>',
            '            <span class="info">{equipmentLabel} -- {hwLabel}</span>',
            '        </div>',
            '        <div class="delete-icon"></div>',
            '    </div>',
            '</tpl>'
        ],
        overItemCls: 'template-list-item-selected',
        store: 'templatesStore',
    
        listeners: {
            itemclick: 'onDataviewItemClick'
        }
    
    });

  2. The fifth argument of your itemclick method has information about the click event, you could use that to grab the clicked element and apply your logic to it:

    Code:
    listeners: {
        itemclick: function(dataview, record, item, index, e, eOpts ) {
            var currentElement = Ext.get(e.target);
            if (currentElement.hasCls('delete-icon') || !!currentElement.findParent('.delete-icon')) {
                console.log('Clicked on Delete Icon');
            }
        }
    }

  3. #2
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    239
    Answers
    40

    Default

    The fifth argument of your itemclick method has information about the click event, you could use that to grab the clicked element and apply your logic to it:

    Code:
    listeners: {
        itemclick: function(dataview, record, item, index, e, eOpts ) {
            var currentElement = Ext.get(e.target);
            if (currentElement.hasCls('delete-icon') || !!currentElement.findParent('.delete-icon')) {
                console.log('Clicked on Delete Icon');
            }
        }
    }
    Guilherme Lopes
    Sencha Support

Similar Threads

  1. Bind grid to Panel; Ext.Template
    By josei in forum Ext 5: Q&A
    Replies: 2
    Last Post: 26 Feb 2015, 5:41 PM
  2. Bind events to svg element
    By martijn1967b in forum Ext: Q&A
    Replies: 0
    Last Post: 11 Feb 2014, 4:10 AM
  3. How to bind logic to template Markup
    By hschaefer123 in forum Sencha Architect 2.x: Help & Discussions
    Replies: 2
    Last Post: 12 Apr 2012, 11:26 PM
  4. Replies: 0
    Last Post: 24 Jul 2011, 6:43 AM

Posting Permissions

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