Make a button make a phone call

**toe** · 3 Sep 2010 6:54 AM

Hello,
I am developing an Android App and I have a buy now button that I want to make a phone call. Does anyone have any advice on this? I have looked through the source and in the documentation and I can not find anything that will allow me to make a button initiate a phone call.

Any help would be greatly appreciated.

Thanks,
-toe

**jay@moduscreate.com** · 3 Sep 2010 6:58 AM

i know that links on the iphone can be tapped and initiate a phone call. I don't know how you can synthesize that - it seems like huge security issue.

**jay@moduscreate.com** · 3 Sep 2010 6:58 AM

maybe make a link look like a button via background.

**toe** · 3 Sep 2010 7:16 AM

Thanks for the response. I tried the link idea and that did not work. I just used a simple href and nothing in the panel is actually clickable. Any more ideas?

**jay@moduscreate.com** · 3 Sep 2010 7:17 AM

I would first do research and see if any of it is at all possible on the andriod. This is not a sencha touch issue.

**toe** · 3 Sep 2010 7:21 AM

We just did a test. If we just have html and put a phone number we can click it and initiate a phone call. In Sencha that is disabled. I am not sure if it has to do with the way the divs are being made clickable and not the content. Does that makes sense? Is there a way to make the content inside of a panel clickable? Like hrefs, imgs, etc...

Thanks,
-toe

**toe** · 3 Sep 2010 7:25 AM

I just tested the app in my iPhone and it works just fine and as expected. The Android is the one that is having the issue. I am using the default browser, it is it just not allowing me to click the phone number. It will work on the Android if it is just HTML, but not with sencha. Right now I am using the overlays example. I just replaced the content with a phone number.

**jay@moduscreate.com** · 3 Sep 2010 7:28 AM

interesting. Can you put together a simple test case? Maybe it's a bug or something.

**toe** · 3 Sep 2010 7:32 AM

Sure thing.

This code works for my iPhone but does not work on my Android. Nothing is clickable.

Here is my HTML

Code:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <title>Overlay</title>
  <link rel="stylesheet" href="../css/ext-touch.css" type="text/css" />
  <script type="text/javascript" src="../js/ext-touch.js"></script>
  <script type="text/javascript" src="index.js"></script>
</head>

<body>
  <div style="display: none;">
    <div id="lipsum">
      <p>CALL 1-865-656-1200</p>
      
    </div>
  </div>
</body>
</html>

Here is my javascript. This is the code from the overlays example code.

Code:

Ext.setup({
    icon: 'icon.png',
    glossOnIcon: false,
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    onReady: function() {
        var overlayTb = new Ext.Toolbar({
            dock: 'top'
        });
        
        var overlay = new Ext.Panel({
            floating: true,
            modal: true,
            centered: false,
            width: Ext.platform.isPhone ? 260 : 400,
            height: Ext.platform.isPhone ? 220 : 400,
            styleHtmlContent: true,
            dockedItems: overlayTb,
            scroll: 'vertical',
            contentEl: 'lipsum',
            cls: 'htmlcontent'
        });

        var showOverlay = function(btn, event) {
            overlay.setCentered(false);
            overlayTb.setTitle('Attached Overlay');
            overlay.showBy(btn);
        };
        
        var showCenteredOverlay = function(btn, event) {
            overlay.setCentered(true);
            overlayTb.setTitle('Centered Overlay');
            overlay.show();
        };

        if (Ext.platform.isPhone) {
            var dockedItems = [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    text: 'showBy',
                    handler: showOverlay                    
                }]
            }, {
                dock: 'bottom',
                xtype: 'toolbar',
                items: [{
                    text: 'show (centered)',
                    handler: showCenteredOverlay             
                }, {xtype: 'spacer'}, {
                    text: 'showBy',
                    handler: showOverlay
                }]
            }];
        }
        else {
            var dockedItems = [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    text: 'showBy',
                    handler: showOverlay
                }, {xtype: 'spacer'}, {
                    text: 'show (centered)',
                    handler: showCenteredOverlay
                }, {xtype: 'spacer'}, {
                    text: 'showBy',
                    handler: showOverlay
                }]
            }];
        }
        
        new Ext.Panel({
            fullscreen: true,
            dockedItems: dockedItems,
            html: "Test the overlay by using the buttons above."
        });
    }
});

Thank you so much for the help.
-toe

Make a button make a phone call

Thread Tools

Search Thread

Display

Make a button make a phone call

Make a button make a phone call

Similar Threads

How to make button launch phone #

Can I make an ajax call to another server?

How to make link and call a function

How to make a call to a spring bean??

Tags for this Thread