Sencha touch html div tap listener

Question

I am working on a sencha touch application. I have a view that extends from panel

The view

Ext.define('MyApp.view.home', {
extend : 'Ext.Panel',
xtype : 'homeGrid',

config : {
    scrollable: 'vertical',
    width: '100%',
    height: '100%',
    html : '<div></div>'
}
});

From the controller, I am adding an item to this panel dynamically, after reading some data from the server:

In the controller

var homeGrid = this.getHomeGrid();
var htmlString = '<ul class="myGrid">';
                htmlString = htmlString + '\
                                               <li>\
                                                   <div class="gridItem" id="item1">\
                                                        <div class="gridIcon">\
                                                             <img class="gridIconImage" src="myIcon.png"/>\
                                                         </div>\
                                                         <div class="gridItemName">\  
                                                              Item 2\
                                                         </div>\
                                              </li>\
                                              <li>\
                                                   <div class="gridItem" id="item2">\
                                                        <div class="gridIcon">\
                                                             <img class="gridIconImage" src="myIcon.png"/>\
                                                         </div>\
                                                         <div class="gridItemName">\  
                                                              Item 1\
                                                         </div>\
                                              </li>\
                                              <li>\
                                                   <div class="gridItem" id="item3">\
                                                        <div class="gridIcon">\
                                                             <img class="gridIconImage" src="myIcon.png"/>\
                                                         </div>\
                                                         <div class="gridItemName">\  
                                                              Item 3\
                                                         </div>\
                                              </li>\  
                                              '</ul>';          

            homeGrid.add({
                xtype: 'panel',
                html : htmlString
            });

Basically I just generate the html from concatenated string and add a new panel item to the original with the HTML generated.

Untill now al works fine.

Now I need to add a tap (click) listener to the gridItem divs, when the user clicks on one of the gridItems I need to show an alert with the id of the div taped.

How can I do that?

I tried to add a control that reference the "gridItem" class:

config: {
    refs: {
        homeGrid: 'emergencyGrid',
        gridItem:  '.gridItem'
    },

    control: {
        '.gridItem': {
            tap: 'onGridItem'
        }
    }

But the onGridItem is never called when I tap.

I think the issue is that I am adding the divs dynamically after initializing the control. Is there a way to add the tap listener after I injected the divs inside the panel?

Thanks a lot for any help

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-05-20T12:56:56

You can try listening to tap on element of homeGrid or the panel itself. Within the event handler you can use event object to find out target html element and on the basis of that you can trigger anything. For example, whenever you want you can add the listener to your view class like this:

Ext.getCmp('#homeGrid').element.on({
    scope: this,
    tap: 'onPanelTap'
});

and in the method you can do something like this:

onPanelTap : function(evt){
    var element = Ext.get(evt.target);
    //console.log(evt, element);
    var parentSpan =  element.parent('.gridItem');
    if(!parentSpan){
        return false;
    }
    var id = parentSpan.getAttribute('id');
    if(element.hasCls('gridIcon')){
        console.log("Icon tapped for "+id);
    } else if(element.hasCls('gridItemName')){
        console.log("Name tapped for "+id);
    }
}

Sencha touch html div tap listener

1 Answers