Results 1 to 2 of 2

Thread: Slider longpress or taphold event (modern theme)

  1. #1
    Sencha User dizelland2000's Avatar
    Join Date
    Sep 2016
    Posts
    3
    Vote Rating
    0
      0  

    Default Slider longpress or taphold event (modern theme)

    How to move "thumb" of the slider by longpress or taphold event?
    I tried to use code from onTap method of slider component but i got error

    Code:

    Code:
    {
                xtype: 'sliderfield',
                label: 'Percentage',
                liveUpdate: true,
                value: 25,
                margin: 5,
                minValue: 0,
                maxValue: 100,
                listeners:{
                    taphold: {
                        element: 'element',
                        fn: function(e){
                            var me = this,
                                element = me.el,
                                minDistance = Infinity,
                                i, absDistance, testValue, closestIndex, oldValue, thumb,
                                ln, values, value, offset, elementX, targetElement, touchPointX;
    
    
    
    
                            if (me.offsetValueRatio === 0 || me.isDisabled() || me.getReadOnly()) {
                                return;
                            }
    
    
    
    
                            targetElement = Ext.get(e.target);
    
    
                            if (!targetElement || (Ext.browser.engineName == 'WebKit' && targetElement.hasCls('x-thumb'))) {
                                return;
                            }
    
    
                            touchPointX = e.touch.point.x;
                            elementX = element.getX();
                            offset = touchPointX - elementX - (me.thumbWidth / 2);
                            value = me.constrainValue(me.getMinValue() + offset / me.offsetValueRatio);
                            values = me.getArrayValues();
                            ln = values.length;
    
    
                            if (ln === 1) {
                                closestIndex = 0;
                            } else {
                                for (i = 0; i < ln; i++) {
                                    testValue = values[i];
                                    absDistance = Math.abs(testValue - value);
    
    
                                    if (absDistance < minDistance) {
                                        minDistance = absDistance;
                                        closestIndex = i;
                                    }
                                }
                            }
    
    
                            oldValue = values[closestIndex];
                            thumb = me.thumbs[closestIndex];
    
    
                            me.setIndexValue(closestIndex, value, me.getAnimation());
    
    
                            if (oldValue !== value) {
                                me.onChange(thumb, value, oldValue);
                            }
                        }
                    }
                }
            }

  2. #2
    Sencha User dizelland2000's Avatar
    Join Date
    Sep 2016
    Posts
    3
    Vote Rating
    0
      0  

    Default

    work, but i don't know how to get slider cmp in event handler
    Code:
    {
                xtype: 'sliderfield',
                label: 'Percentage',
                liveUpdate: true,
                value: 25,
                margin: 5,
                minValue: 0,
                maxValue: 100,
                id:'sliderAAA',
                listeners:{
                    taphold: {
                        element: 'element',
                        fn: function(e){
                            sl =Ext.getCmp('sliderAAA');
                            var me = sl.getSlider(),
                                element = me.el,
                                minDistance = Infinity,
                                i, absDistance, testValue, closestIndex, oldValue, thumb,
                                ln, values, value, offset, elementX, targetElement, touchPointX;
                            
                            
    
    
                            /*
                            if (me.offsetValueRatio === 0 || me.isDisabled() || me.getReadOnly()) {
                                return;
                            }
                            */
    
    
                            targetElement = Ext.get(e.target);
    
    
                            if (!targetElement || (Ext.browser.engineName == 'WebKit' && targetElement.hasCls('x-thumb'))) {
                                return;
                            }
    
    
                            touchPointX = e.touch.point.x;
                            elementX = element.getX();
                            offset = touchPointX - elementX - (me.thumbWidth / 2);
                            value = me.constrainValue(me.getMinValue() + offset / me.offsetValueRatio);
                            values = me.getArrayValues();
                            ln = values.length;
    
    
                            if (ln === 1) {
                                closestIndex = 0;
                            } else {
                                for (i = 0; i < ln; i++) {
                                    testValue = values[i];
                                    absDistance = Math.abs(testValue - value);
    
    
                                    if (absDistance < minDistance) {
                                        minDistance = absDistance;
                                        closestIndex = i;
                                    }
                                }
                            }
    
    
                            oldValue = values[closestIndex];
                            thumb = me.thumbs[closestIndex];
    
    
                            me.setIndexValue(closestIndex, value, me.getAnimation());
    
    
                            if (oldValue !== value) {
                                me.onChange(thumb, value, oldValue);
                            }
                        }
                    }
                }

Similar Threads

  1. Modern 6.5.3 - Material Theme: Issue closing dialog
    By ratamiette@gmail.com in forum Ext 6: Bugs
    Replies: 0
    Last Post: 18 Apr 2018, 7:59 AM
  2. HTML/visual adjustments with ExtJS 4
    By adrianelineage in forum Ext: Q&A
    Replies: 1
    Last Post: 1 Feb 2017, 2:29 PM
  3. [FIXED] Theme Modern Titlebar
    By svenna in forum Sencha Themer
    Replies: 3
    Last Post: 24 Sep 2016, 5:36 AM
  4. modern-neptune theme
    By lubendo in forum Ext 6: Q&A
    Replies: 2
    Last Post: 9 Aug 2015, 11:16 PM
  5. Problem with slider field in tizen theme (ST2.4)
    By seppy in forum Sencha Touch 2.x: Discussion
    Replies: 0
    Last Post: 14 Sep 2014, 9:35 AM

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
  •