Fire 'tel' link from button in Sencha Touch

Question

I have an ActionSheet which is shown when a user taps on a list item. In the ActionSheet are three buttons - one to remove the contact, one to make a call to them and one to dismiss the ActionSheet. My question is, how do I bind the equivalent of a <a href="tel:000000000"></a> to the button?

I need to specify the 'tel:' protocol so that iOS and Android will force the Phone application to load with this number?

Answer 1

It's pretty simple,

All you have to do is change the document's location (window element) in the button's handler:

        var tapHandler = function(button, event){
            Ext.Msg.confirm('External Link', 'Call ' + button.contactName + "?", function(res){
                if (res == 'yes') {
                    window.location = button.callUrl;
                }
            }, this);

        };


        var callButton = new Ext.Button({
            text: 'Call Now',
            callUrl: 'tel:995223423',
            contactName: 'Ben M',
            handler: tapHandler
        });

Answer 2

Haven't tried this, but if Rubinsh's method doesn't work try creating it programmatically in the button's click handler.

function(){
   var alink = Ext.getBody().createChild({tag: 'a', href: 'tel:#########'});
   var event = document.createEvent("TouchEvent");
   event.initTouchEvent('tap', true, true, window, 0, 0, 0, 0);
   alink.dispatchEvent(event);
}

References

• SenchaTouch Source 1.1.0 sencha-touch-debug-w-comments.js:27962
• Apple Developer Reference for TouchEvent