Results 1 to 7 of 7

Thread: How do I add tap event for a table cell?

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    Chennai, TN, INDIA
    Posts
    22

    Default How do I add tap event for a table cell?

    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.

    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>'
            });

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    The itemtap event will fire when you tap on a row. To check the element target you can do

    Code:
    e.getTarget('td')
    and that will return an element that matches the selector 'td'.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

    You don't want to bind that many listeners as it's going to slow down you application. A better approach is to use delegation as Mitchell alluded to. All the existing DataView events provide the raw event where you can check the target element.

    Sencha Inc

    Jamie Avins

    @jamieavins

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    Chennai, TN, INDIA
    Posts
    22

    Default Is there any grid available for Sencha Touch 2?

    Guys, thanks for your reply. Is there any grid available in Sencha Touch? Will I be able to achieve the same result while using a grid? Here I am working on Tablets and not smart phones, so you could also suggest me the best way to get it done on tablets.

  5. #5
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Quote Originally Posted by dipinkumar View Post
    Guys, thanks for your reply. Is there any grid available in Sencha Touch? Will I be able to achieve the same result while using a grid? Here I am working on Tablets and not smart phones, so you could also suggest me the best way to get it done on tablets.
    Sure there is a grid! https://github.com/mitchellsimoens/Ext.ux.touch.grid
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    Chennai, TN, INDIA
    Posts
    22

    Default

    I have implemented Ext.ux.touch.grid. Its working fine, but is there a way to find the item tap row index and column index?

  7. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    For row index the itemtap event has this in it. For the column index you can get the index by finding what column is associated to the <div> tapped on and then the index of that column.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Tags for this Thread

Posting Permissions

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