Sencha Touch 2: Google+ signin button in html

Question

I'm trying to add google+ signin button to a Sencha Touch 2 application according to this documentation: https://developers.google.com/+/web/signin/add-button-javascript#step_4_add_a_google_sign-in_button_to_your_page

My idea is to simply create a container and add this code (html and javascript) within the view like below:

Ext.define('BrewersMoney.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
config: {
    layout: {
        type: 'hbox',
        align: 'middle'
    },
    html: '<meta name="google-signin-cli............'
}
});

But this code does not work. Any ideas how I can add the code from the google documentation in order to get the get the google+ login button?

Thanks a lot and regards, Peter

Answer 1

Create a file with the script:

<script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/client:plusone.js?onload=render';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    })();
</script>

Then add a Ext.Button with the ID 'myButton'.

After that you need to call

  // Additional params
  var additionalParams = {
    'theme' : 'dark'
  };

  gapi.signin.render('myButton', additionalParams);