Hi, I just picked up Sencha Touch recently but I'm experiencing a few issues. First of all, you can view the site I'm working on here: m.willcrichton.net. I'm using a Droid X to view my website. I've also tested these errors on an HTC device (I forget which type).

The application I'm currently testing is a TabPanel with a bottom tab bar. The pages are a carousel, a map, a list, and a form.

Would anyone know how to resolve the following issues?
  1. Carousel animation: when I swipe the carousel to go to the next slide, if my swipe is a quick touch then the next slide swaps in almost instantaneously. The transition is a bit jarring. Is there a way to make the animation slower?
  2. The frame is set to fill the entire page (fullscreen: true), but there's always a 1 or 2px white bar at the very bottom of the screen. Is there a way to get rid of it?
  3. The TabBar is set so all the icons should align in the middle (pack: 'center'). This works when I view the page in Chrome, but the icons are left aligned when I pull it up on my phone. Do I need to change another setting?
  4. Lastly, the sliding transition between pages (when you click a particular tab) is also rough. The transition appears to mess with the text on the tab bar. When I move to a new page, it's as if a mysterious force decided to increase the font weight by 20, and then revert it back to normal a half second later.
I apologize for the laundry list of issues, but any help would be greatly appreciated.

Full code:
Code:
var master = new Ext.Application({ launch: initApp });

Ext.regModel('Contact',{
    fields: ['firstName','lastName']
});


var listStore = new Ext.data.JsonStore({
    model: 'Contact',
    sorters: 'lastName',
    getGroupString: function(record){
        return record.get('lastName')[0];
    },
    data: [
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'},
        {firstName: 'Tommy',   lastName: 'Maintz'},
        {firstName: 'Rob',     lastName: 'Dougan'},
        {firstName: 'Ed',      lastName: 'Spencer'},
        {firstName: 'Jamie',   lastName: 'Avins'},
        {firstName: 'Aaron',   lastName: 'Conran'},
        {firstName: 'Dave',    lastName: 'Kaneda'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay',     lastName: 'Robinson'}
    ]
});
  
function initApp(){


    master.list = new Ext.List({
        store: listStore,
        itemTpl: '<div class="contact">{firstName} {lastName}</div>',
        grouped: true,
        indexBar: true
    }); 
    
    master.actionSheet = new Ext.ActionSheet({
        items: [
            {
                text: 'Delete',
                ui: 'decline'
            },
            {
                text: 'Save'
            },
            {
                text: 'Cancel',
                ui: 'confirm',
                handler: function(){
                    master.actionSheet.hide();
                }
            }
        ]
    });
    
    master.dock = new Ext.TabBar({    
        dock: 'bottom',
        layout: {
            pack: 'center'
        },
        ui: 'dark'
    });
    
    master.topBar = new Ext.Panel({
        style: 'background: black; padding: 5px;',
        dock: 'top',
        items: [
            new Ext.Button({
                ui: 'action',
                text: 'Open menu',
                handler: function(){
                    master.actionSheet.show();
                }
            })
        ]
    });
    
    master.Form = new Ext.form.FormPanel({
        title: 'Form',
        iconCls: 'form',
        scroll: 'vertical',
        defaults: {
            useClearIcon: true
        },
        items: [
        {
            xtype: 'fieldset',
            title: 'Header 1',
            instructions: 'Please enter accurate information.',
            defaults: {
                labelWidth: '35%'
            },
            items: [
            {
                xtype: 'textfield',
                name: 'name',
                label: 'Name',
                placeHolder: 'Wild Bill',
                autoCapitalize: true
            },
            {
                xtype: 'passwordfield',
                name: 'pass',
                label: 'Password'
            },
            {
                xtype: 'emailfield',
                name: 'email',
                label: 'Email',
                placeholder: 'wildbill@willcrichton.net'
            },
            {
                xtype: 'datepickerfield',
                name: 'birthday',
                label: 'Birthday',
                picker: { yearFrom: 1900 }
            }]
        }]
    });
    
    master.mainScreen = new Ext.TabPanel({
        fullscreen: true,
        tabBar: master.dock,
        defaults: { scoll: 'vertical' },
        items: [
            {
                // Carousel page
                title: 'Carousel',
                iconCls: 'info',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                defaults: { flex: 1 },
                items: [
                    {
                        xtype: 'carousel',
                        items: [
                            { style: "background: green;" },
                            { style: "background: red;" },
                            { style: "background: yellow;" }
                        ]
                    },
                    { 
                        xtype: 'carousel',
                        direction: 'vertical',
                        items: [
                            { style: "background: yellow;" },
                            { style: "background: green;" },
                            { style: "background: red;" }
                        ]
                    }
                ]
            },
            {
                // Map page
                title: 'Maps',
                iconCls: 'maps',
                layout: 'fit',
                items: [{ xtype: 'map', useCurrentLocation: true }]
            },
            {
                // List page
                title: 'List',
                iconCls: 'list',
                layout: 'fit',
                items: [ master.list ]
            },
            master.Form
        ]
    });


}