1. #1
    Sencha User
    Join Date
    Jun 2010
    Location
    The Hague
    Posts
    15
    Vote Rating
    0
    tijs is on a distinguished road

      0  

    Default Tap or click event for image in Panel

    Tap or click event for image in Panel


    I want something, i would think, reasonable simple namely; doing something when an image in a panel (or the panel itself) is clicked or tapped. Somehow it's not working though...

    Context: a carrousel with three images per card (which i stuck in panels) that should each open an overlay with a video when clicked. I have my application layed out. I can do overlays, carrousels and video. But i can't get the d*mn click event to fire...

    I've tried for instance:

    Code:
    var look = new Ext.Panel({
        id: name,
        cls: 'look',
        html: '<img src="content/images/' + image + '"></img>',
        listeners: {
            single: true,
            click: function(){
               console.debug('click');
            },
            tap: function(){
               console.debug('tap');
            }
        }
    });
    neither events fire since i guess Panel has neither event bubbling up. So then i tried:

    Code:
    look.on('click', function(){
        console.log('hi');
        //return false;
    }, null, {delegate: 'img'});
    but no luck there either. i even tried adding a plugin to the panel that defines a DomObserver along the lines of the example in the docs but i couldn't get that to work, and it seemed overly complex for something simple anyway...

    What should i try next?

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Location
    The Hague
    Posts
    15
    Vote Rating
    0
    tijs is on a distinguished road

      0  

    Default


    Cool i think i figured it out. This lazy rendering thing was really tripping me up, requires another way of thinking i guess. but... The following seems to work as advertised:

    Code:
    var look = new Ext.Panel({
         id: name,
         cls: 'look',
         html: '<img src="content/images/' + image + '"></img>',
         afterRender: function() {
             Ext.Panel.superclass.afterRender.apply(this, arguments);
             Ext.EventManager.on(this.id, 'click', function() { console.debug("clicked!"); });
         },
    
     });
    Now if there is a cleaner/better way to achieve this please let me know!

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Quicker:

    Code:
    new Ext.Panel({
        listeners: {  
            afterrender: function(c){
                c.el.on('click', function(){});
            }
        }
    });
    In future we're going to add the ability to bind dom level events on components directly via the listeners config, so stay tuned.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Location
    The Hague
    Posts
    15
    Vote Rating
    0
    tijs is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    In future we're going to add the ability to bind dom level events on components directly via the listeners config, so stay tuned.
    Great news!

    I would also love to see more tutorials in the spirit of the latest data and infinite carrousel posts. Something like the howtonode site was doing for instance. When your not coming from Ext.js a lot of this stuff is completely foreign while the documentation examples at least seem to expect some kind of basic understanding of the way stuff is done here.

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    xueboli is on a distinguished road

      0  

    Default test

    test


    var look = new Ext.Panel({ id: name, cls: 'look', html: '<img src="content/images/' + image + '"></img>', listeners: { el:{ tap:function(e){ alert('click'); } } }});

Similar Threads

  1. [SOLVED] Dataview display some image - on event click how to know which image ?
    By Etienne Jouvin in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Feb 2011, 4:46 AM
  2. Tap/Click listener on an element in Tab Items
    By pennyroyal in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 17 Aug 2010, 7:55 AM
  3. image click event
    By anoop abbot in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 21 Apr 2009, 1:10 AM
  4. display an image with click event in a panel
    By vamsee24 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Feb 2009, 5:50 AM
  5. Image click event
    By nheminge in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 13 Dec 2007, 8:09 PM

Thread Participants: 2

Tags for this Thread