sencha-touch width of tab panel decreases

Question

-I have a problem here tabBarDock: 'bottom' reduces the height of the tab panel, from default top height. -Please help

Ext.setup({
icon:'icon.png',
 glossOnIcon: false,
onReady:function(){
  new Ext.TabPanel({
        fullscreen: true,
        type: 'dark',
        sortable: true,
        tabBarDock: 'bottom',
        items: [{
            title: 'Tab 1',
            html: '1',
            cls: 'card1'
        }, {
            title: 'Tab 2',
            xtype:'map',
            useCurrentLocation: true,
            fullscreen:true,
        layout:'fit',
            cls: 'card2'
        }, {
            title: 'Tab 3',
            html: '3',
            cls: 'card3'
        }]
    });
}});

Answer 1

When the tab bar is docked to the bottom you must include a iconCls property in order to have get the default top height. See example:

Ext.setup({
icon:'icon.png',
 glossOnIcon: false,
onReady:function(){
  new Ext.TabPanel({
        fullscreen: true,
        ui: 'dark',
        sortable: true,
        tabBarDock: 'bottom',
        items: [{
            title: 'Tab 1',
            iconCls:'home',
            html: '1',
            cls: 'card1'
        }, {
            title: 'Tab 2',
            iconCls:'locate',
            xtype:'map',
            useCurrentLocation: true,
            fullscreen:true,
        layout:'fit',
            cls: 'card2'
        }, {
            title: 'Tab 3',
            html: '3',
            iconCls:'search',
            cls: 'card3'
        }]
    });
}});

Also the Ext.TapPanel doesn't have type property. I think you meant the ui property.