Panel not hiding properly

Question

I have a panel whose items are a list and a panel like below

When I click on a button, I want to hide this panel. So far, I managed to do that, but this is what I get

I would like to know how to remove this grey space form the bottom of the panel.

I already this but it's not working :

this.toolsPnl.hide({type:'slide', direction:'up'});
this.doComponentLayout();
this.doLayout();

Update : Code

this.pasteBtn = new Ext.Button({
    cls:'paste-copy-tools-panel',
    text: 'Coller',
    ui: 'normal',
    handler : this.onPasteBtnTap,
    scope:this
});

this.cancelBtn = new Ext.Button({
    cls:'cancel-copy-tools-panel',
    text: 'Annuler',
    ui: 'normal',
    handler: this.onCancelBtnTap,
    scope:this
});

this.toolsPnl = new Ext.Panel({
    layout:{type:'hbox', align:'stretch'},
    height:40,
    cls:'document-tools-panel',
    hidden:true,
    items:[this.pasteBtn,this.cancelBtn]
});

this.currentFolderPnl = new Ext.Panel({
    cls:'document-current-folder-panel',
    html:'/'
});

this.list = new Ext.List({
    flex:1,
    cls:'document-list',
    id: 'document-list',
    store: app.stores.Document,
    itemTpl: app.templates.document
});

app.views.DocumentList.superclass.constructor.call(this, {
    selectedCls : "x-item-selected",
    dockedItems: [{
        xtype: 'toolbar',
        ui:'dark',
        title: 'Documents',
        items:[this.backBtn,{xtype:'spacer'},this.newBtn]
    }],
    layout: 'vbox',
    items: [
        this.currentFolderPnl,
        this.list,
        this.toolsPnl,
    ]
});

Answer 1

May help you with some hack. The main trick is in fixListHeight function, but for showing tools panel for the first time I have to call doComponentLayout for its container first. Don't know why this functionality doesn't work out of the box... have the feeling there is something I have missed. Nevertheless, here is the code.

new Ext.Application({
    launch: function() {
        // helper property
        // indicates whether toolsPnl was shown already
        this.first = true;
        this.viewport = new Ext.TabPanel({
            fullscreen: true,
            layout: 'card',
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [{
                    xtype: 'spacer'
                }, {
                    text: 'show',
                    listeners: {
                        tap: function (btn) {
                            var panel = Ext.getCmp('toolsPnl');
                            if (panel.isHidden()) {
                                panel.show({type:'slide', direction:'up'});
                                btn.setText('hide');
                            } else {
                                panel.hide({type:'slide', direction:'up'});
                                btn.setText('show');
                                this.fixListHeight();
                            }
                        },
                        scope: this
                    }
                }]
            }],
            tabBar: {
                layout: {
                    type: 'fit'
                }
            },
            tabBarDock: 'bottom',
            items: [{
                title: 'Some tabs here...',
                id: 'docTab',
                iconCls: 'favorites',
                layout: 'card',
                dockedItems: [{
                    id: 'toolsPnl',
                    dock: 'bottom',
                    html: 'Tools panel',
                    style: {
                        'background-color': 'lightblue',
                        'line-height': '2em',
                        'text-align': 'center',
                        'height': '40px',
                        'width': '100%'
                    },
                    hidden:true,
                    listeners: {
                        show: function () {
                            if (this.first) {
                                Ext.getCmp('docTab').doComponentLayout();
                                this.fixListHeight();
                                this.first = false;
                            }
                            Ext.defer(function () {
                                this.fixListHeight(-1);
                            }, 250, this);
                        },
                        scope: this
                    }
                }],
                items : [{
                    xtype: 'list',
                    id: 'docList',
                    itemTpl: '{item}',
                    store: new Ext.data.Store({
                        data: [{item: 'Some data in the list...'}],
                        fields: ['item']
                    })
                }]
            }]
        });
        this.fixListHeight = function (direction) {
            var panel = Ext.getCmp('toolsPnl'),
                tab = Ext.getCmp('docTab'),
                list = Ext.getCmp('docList'),
                el,
                h = list.getHeight(),
                dh = panel.getHeight(),
                dir = direction || 1;
            el = tab.getEl().child('.x-panel-body');
            el.setHeight(h + dh * dir);
            el.child('.x-list').setHeight(h + dh * dir);
            el.down('.x-scroller').setHeight(h + dh * dir);
        };
    }
});

Answer 2

That looks like the default sencha touch grey. A simple work around would be adding the code below to the panel

style:'background-color:White'