面板未正确隐藏

Question

我有一个面板，其项目是列表和下面的面板

当我点击按钮时，我想要隐藏此面板。到目前为止，我设法做到了，但这就是我得到的

我想知道如何从面板底部删除这个灰色空间。

我已经这样了，但它不起作用：

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

Answer 1

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

style:'background-color:White'

Answer 2

可以帮你解决一些问题。主要技巧是在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);
        };
    }
});