Getting Started

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>GeoTweets</title>
	 <link rel="stylesheet" href="../../resources/css/sencha-touch.css" type="text/css">
	 <link rel="stylesheet" href="css/guide.css" type="text/css">
	 <script type="text/javascript" src="../../ext-touch-debug.js"></script>
	 <script type="text/javascript" src="src/index.js"></script>
 </head>
 <body></body>
 </html>

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        var timeline = new Ext.Component({
            title: 'Timeline',
            cls: 'timeline',
            scroll: 'vertical',
            tpl: [
                '<tpl for=".">',
                    '<div class="tweet">',
                            '<div class="avatar"><img src="{profile_image_url}" /></div>',
                            '<div class="tweet-content">',
                                '<h2>{from_user}</h2>',
                                '<p>{text}</p>',
                            '</div>',
                    '</div>',
                '</tpl>'
            ]
        });

        var map = new Ext.Map({
            title: 'Map',
            getLocation: true,
            mapOptions: {
                zoom: 12
            }
        });

        var panel = new Ext.TabPanel({
            fullscreen: true,
            cardSwitchAnimation: 'slide',
            items: [map, timeline]
        });

        var refresh = function() {
            var coords = map.geo.coords;

            Ext.util.JSONP.request({
                url: 'http://search.twitter.com/search.json',
                callbackKey: 'callback',
                params: {
                    geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
                    rpp: 30
                },
                callback: function(data) {
                    data = data.results;

                    // Update the tweets in timeline
                    timeline.update(data);

                    // Add points to the map
                    for (var i = 0, ln = data.length; i < ln; i++) {
                        var tweet = data[i];

                        // If the tweet is geo-tagged, use that to display marker
                        if (tweet.geo && tweet.geo.coordinates) {
                            var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]);
                            addMarker(tweet, position);
                        }
                    }
                }
            });
        };

        // These are all Google Maps APIs
        var addMarker = function(tweet, position) {
            var marker = new google.maps.Marker({
                map: map.map,
                position: position
            });
        };

        map.geo.on('update', refresh);

        var tabBar = panel.getTabBar();
        tabBar.addDocked({
            xtype: 'button',
            ui: 'mask',
            iconCls: 'refresh',
            dock: 'right',
            stretch: false,
            align: 'center',
            handler: refresh
        });

    }
});

...

Bits

var objectName = new Ext.ComponentName({
  objectDefinition
});


    var map = new Ext.Map({
        title: 'Map',        // Name that appears on this tab
        getLocation: true,   // Gets user's current location
        mapOptions: {        // Used in rendering map
          zoom: 12
        }
    });


var panel = new Ext.TabPanel({
  fullscreen: true,            // The panel will take up the full rather than partial screen
  cardAnimation: 'slide',       // Special effect for switching between cards
  items: [map, timeline]       // Components (cards) that the tabs correspond with
});

leftThing = new Ext.Panel({
  html: '<h1>Here is my Left Thing</h1>',
});

rightThing = new Ext.Panel({
  html: '<h1>Here is my Right Thing</h1>',
});