1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    52
    Answers
    2
    Vote Rating
    1
    testvogel is on a distinguished road

      0  

    Default Unanswered: taphold on items in a list

    Unanswered: taphold on items in a list


    Hi,

    is there any event available like "taphold" which is working for items inside of a list. I want to open a ActionSheet for a specific item of a list after taphold.
    taphold is btw not working for items in a list. Only itemtap and select events are working. Im looking for an event like itemtaphold or selecthold.

    greets

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You will need to override Ext.dataview.DataView, as it currently doesn't bubble taphold from the element to the component. I have attached code below to do this.

    WARNING: This will most probably break in a future release.

    Code:
    Ext.define('Overrides.dataview.TapHold', {
        override: 'Ext.dataview.DataView',
        doInitialize: function() {
    
            console.log('doInitialize');
            var me = this,
                triggerObj = {
                    delegate: '> div',
                    scope: me
                },
                clearObj = {
                    scope: me
                },
                elementContainerElement;
    
    
            me.getViewItems();
            elementContainerElement = me.elementContainer.element;
    
            clearObj[me.getTriggerCtEvent()] = 'onContainerTrigger';
            me.element.on(clearObj);
    
            triggerObj[me.getTriggerEvent()] = 'onItemTrigger';
            elementContainerElement.on(triggerObj);
    
            elementContainerElement.on({
                delegate: '> div',
                scope   : me,
    
                touchstart: 'onItemTouchStart',
                touchend  : 'onItemTouchEnd',
                tap       : 'onItemTap',
                taphold   : 'onItemTapHold',
                touchmove : 'onItemTouchMove',
                doubletap : 'onItemDoubleTap',
                swipe     : 'onItemSwipe'
            });
        },
    
        onItemTapHold: function(e) {
            var me = this,
                target = e.getTarget(),
                index = me.getViewItems().indexOf(target),
                item = Ext.get(target);
    
            me.fireEvent('itemtaphold', me, index, item, e);
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    282
    Answers
    1
    Vote Rating
    8
    bclinton will become famous soon enough

      0  

    Default


    Thanks for the code.

    I had one problem with it using 2.0 PR2. In the onItemTapHold handler, me.getViewItems() was returning a Javascript NodeList which doesn't have an indexOf method like a normal array. I was getting the following error:
    Uncaught TypeError: Object #<NodeList> has no method 'indexOf'
    I changed the onItemTapHold handler slightly and now it is working well for me:

    Code:
        onItemTapHold: function(e) {
    
    
            var me = this,
                target = e.getTarget(),
                nodeList = me.getViewItems(),
                item = Ext.get(target),
                index,
                i;
    
    
            for (i= 0; i< nodeList.length; i++) {
                if (nodeList[i] == e.getTarget()) {
                    index = i; break;
                }
            }
    
    
            me.fireEvent('itemtaphold', me, index, item, e);
    
    
        }
    I hope that itemtaphold makes it in to the final version. It seems like a typical behavior that shouldn't require an override.

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    The problem is; tap hold isn't used very often, and the more events you listen to, the more performance hit you have. I will open a ticket for the team to discuss.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    27
    Vote Rating
    0
    passion4code is on a distinguished road

      0  

    Default


    I was needing to get this in place as well, and was checking out the build debug-all.js for B3, and looked at the Ext.dataview.element.Container definition (somewhere around line 57169)

    Within the doInitialize call, look at the event property attempting to be bound ( taphold: 'onItemTapHold'). taphold isn't a legit event to listen to, but longpress is.

    RDougan, your concerns are well justified. Devs must take care when binding longpress events to too many elements, especially if you're not destroying them when you move to a different panel.

    To get your "itemtaphold" event to fire, change taphold: 'onItemTapHold' to longpress: 'onItemTapHold'

    Disclaimer: All changes to your core sencha js files will get over-written when you upgrade to a new version!