Question

I have a dataView where I am binding data to a table. This is a complex data where I have to bind click event for each table cell too. I do not have any idea how this could be done in Sencha Touch, but the same has been done with jQuery and jQMobile.

Here is my code.

var touchTeam = Ext.create('Ext.DataView', {
        fullscreen: true,
        items:[{
            xtype:'toolbar',
            title:'Dashboard',
            docked:'top',
            items:[{
                iconCls:'home',
                iconMask:true,
                ui:'confirm'
            },{
                xtype:'spacer'
            },{
                xtype:'button',
                text:'Logout',
                ui:'decline',
                handler:function(){
                    Ext.Msg.confirm('ALERT','Are you sure that you want to logout?',Ext.emptyFn);
                }
            }]
        },{
            xtype:'toolbar',
            docked:'bottom'
        }],
        store: {
            fields: ['AAAA', 'BBBB', 'CCCC', 'DDDD', 'EEEE'],
            data: [
                {AAAA: 'TableRow1',  BBBB: 0,CCCC:4,DDDD:2,EEEE:0},
                {AAAA: 'TableRow2',  BBBB: 0,CCCC:0,DDDD:0,EEEE:0},
                {AAAA: 'TableRow3',  BBBB: 0,CCCC:0,DDDD:0,EEEE:0},
                {AAAA: 'TableRow4',  BBBB: 0,CCCC:0,DDDD:0,EEEE:0},
            ]
        },
        itemTpl:'<table border="0" cellpadding="5" cellspacing="5" style="width:100%; margin-top:10px;"><tr><td style="width:20%; text-align: center;">{AAAA}</td><td style="width:20%; text-align: center;">{BBBB}</td><td style="width:20%; text-align: center;">{CCCC}</td><td style="width:20%; text-align: center;">{DDDD}</td><td style="width:20%; text-align: center;">{EEEE}</td></tr></table>'
    });

Answer 1

You need to attach a “itemtap” listener to the Dataview. And inside the function you have to check the target element.

listeners : {
    scope : this,
    itemtap : function(dataview, index, el, record, e){
        //Browser event e
        console.log(e.target, el);
    }
}