Despite what some people might think getting AdMob up and running with Sencha Touch isn't such an easy task. I wanted to try adding some to one of my Android apps built using Sencha Touch and PhoneGap. First things first - don't bother getting the AdMob code for Android/Java if you are using PhoneGap. Go right for the SmartPhone Web which will end up giving you some Javascript to include with your code. You will see references (most obviously, in the javascript file URL) to iPhone, but rest assured - it works for both iPhones and Android. Ads will actually not be displayed at all on other platforms, including in your browser.
You should now have some code that looks something like this:
<script type="text/javascript">
var admob_vars = {
pubid: 'XXXXXXXXXXXXXXX', // publisher id
bgcolor: 'EEEEEE', // background color (hex)
text: '000000', // font-color (hex)
test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js">
</script>Go ahead and slap that into your code before Ext.onReady. The ad will be placed at the top of your app.Keep test set to true, fire up your mobile device, and ensure it appears. Your Sencha Touch code might end up hiding it, so if it doesn't appear at first temporarily comment out your Ext.onReady.
Now here is the major problem: Most Sencha Touch apps have one component (typically a panel) with fullscreen set to true. This will essentially override the ad. Yes, it's very nice to use fullscreen, however trying to toss the AdMob code into a panel component just won't work. So time to drop fullscreen from your master panel, of course now we need to recreate some of the things fullscreen does to keep our app's layout looking nice.
With fullscreen set to true the component automatically knows where to go... I mean, there's really no debate. However without fullscreen we should use renderTo on the master panel, and set it to Ext.getBody().
