Sencha touch 面板未正确隐藏

我有一个面板，其项目是一个列表和一个面板，如下所示

当我点击一个按钮时，我想隐藏这个面板。到目前为止，我成功地做到了，但这就是我得到的

我想知道如何去除面板底部的灰色空间

我已经知道了，但它不起作用：

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

更新：代码

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,
    ]
});

---

这看起来像默认的sencha触摸灰色。一个简单的解决方法是将下面的代码添加到面板中

style:'background-color:White'

---

也许能帮你解决一些问题。主要的技巧是在

fixListHeight

函数中，但是为了第一次显示工具面板，我必须首先为其容器调用

doComponentLayout

。不知道为什么这个功能不能开箱即用。。。我觉得我错过了什么。然而，这里是代码

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);
        };
    }
});

---

但有了这个解决方案，它不会显示我的列表，而是只显示一个白色面板，这不是一个解决方案。这是一个解决方案，用于解决一个实现不佳的功能。请为此提供完整的代码。完成。如果你还需要一些，请告诉我。我已经试着用一些简单的测试用例来重现你的案例，以缩小问题的范围，但我无法重现，所以你能用一些真正有助于解决问题的简单测试用例来缩小问题的范围吗