Results 1 to 3 of 3

Thread: Panel "tap" working, how to replicate button "pressedCls" css class change?

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Answers
    2

    Default Answered: Panel "tap" working, how to replicate button "pressedCls" css class change?

    Hi!

    I have the following code working perfectly with an Ext.Panel, so when I tap it, it fires a function and various things happen... What I'm trying to do is replicate the Ext.Button class change, which on the button can be achieved by pressedCls, so when the panel is tapped I change the class to acknowledge the tap. Is there a specific event I can look out for, such as "down" and "up" so I can assign and remove a new class? In JavaScript on a standard html webpage I'd be looking for the onmousedown event to change the class of the element when clicked.

    Code:
    var panSmartWire = Ext.create('Ext.Panel', {             
         cls: 'cartmob-tap-light',
         height: "auto",
         id: "testingTapping",
         html: '<div style="float:left">TAP ME!</div><div style="text-align:right;font-size:18pt">&gt;</div>' 
    });
    // on(eventName, fn, [scope], [options], [order])
    panSmartWire.on('tap', this.showAnotherPageCommand, this, {element: 'element', pagerequest: 'smartwire'});

    Many thanks for any help!

  2. Something like this?

    Code:
    Ext.define('MyPanel', {
        extend : 'Ext.Panel',
        
        config : {
            pressedCls : Ext.baseCSSPrefix + 'panel-pressing'
        },
        
        initialize : function() {
            this.callParent();
            
            this.element.on({
                scope      : this,
                touchstart : 'onPress',
                touchend   : 'onRelease'
            });
        },
        
        onPress : function() {
            var cls = this.getPressedCls();
            
            this.element.addCls(cls);
        },
        
        onRelease : function() {
            var cls = this.getPressedCls();
            
            this.element.removeCls(cls);
        }
    });

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

    Default

    Something like this?

    Code:
    Ext.define('MyPanel', {
        extend : 'Ext.Panel',
        
        config : {
            pressedCls : Ext.baseCSSPrefix + 'panel-pressing'
        },
        
        initialize : function() {
            this.callParent();
            
            this.element.on({
                scope      : this,
                touchstart : 'onPress',
                touchend   : 'onRelease'
            });
        },
        
        onPress : function() {
            var cls = this.getPressedCls();
            
            this.element.addCls(cls);
        },
        
        onRelease : function() {
            var cls = this.getPressedCls();
            
            this.element.removeCls(cls);
        }
    });
    Mitchell Simoens @LikelyMitch

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

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

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    83
    Answers
    2

    Default

    This looks prefect! I'm new to Sencha Touch so sometimes it's tricky to know exactly what event to look for (e.g. touchstart and touchend) for particular elements. I also didn't know about the Ext.baseCSSPrefix which I think will solve a couple of other questions I was running through in my head.

    Thanks so much for your help!

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
  •