隐藏后扩展树面板延迟

Question

我有一个带有边框布局的主视图端口，其中包含四个区域

北部地区有一个Header是panel。
南部区域是作为面板的页脚。
东部地区也是面板。
西区有Tree Panel。

fiddle link

Ext.define('projectName.view.mainView', {
extend: 'Ext.container.Viewport',

requires: [
    'projectName.view.header',
    'projectName.view.navigation',
    'projectName.view.searchContent',
    'projectName.view.content',
    'projectName.view.footer',
    'Ext.tree.Panel'
],

itemId: 'mainView',
layout: 'border',

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'container',
                region: 'center',
                cls: 'mainContainer',
                layout: 'border',
                items: [
                    {
                        xtype: 'appHeader',
                        height: 100,
                        region: 'north'
                    },
                    {
                        xtype: 'navigation',
                        region: 'west'
                    },
                    {
                        xtype: 'searchContent',
                        region: 'west'
                    },
                    {
                        xtype: 'content',
                        region: 'center'
                    },
                    {
                        xtype: 'footer',
                        region: 'south'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

});

对于树形面板，代码如下所示。

Ext.define('projectName.view.navigation', {
extend: 'Ext.tree.Panel',
alias: 'widget.navigation',

requires: [
    'Ext.tree.View'
],

width: 295,
animCollapse: true,
collapsed: true,
collapsible: true,
hideCollapseTool: true,
title: 'Menu',
titleCollapse: false,
store: 'navigationStore',
rootVisible: false,

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        viewConfig: {

        }
    });

    me.callParent(arguments);
}

});

通过上述配置设置，树面板应通过单击标题折叠/展开。
但是现在我想在点击树中的叶子时隐藏面板。 下面的代码是在导航选择变化即树面板选择变化中编写的。

var record = records[0],
text = record.get('text'),
xtype = record.get('id'),
alias = 'widget.' + xtype,
searchContentPanel = this.getSearchContent(),
contentPanel = this.getContent(),
cmp;

if (xtype && record.isLeaf()) {
searchContentPanel.removeAll(true);

contentPanel.removeAll(true);
var className = Ext.ClassManager.getNameByAlias(alias);
var ViewClass = Ext.ClassManager.get(className);

cmp = new ViewClass();
searchContentPanel.add(cmp);
if (cmp.floating) {
    cmp.show();
}
var navigation = this.getNavigation();
navigation.hide();

}

点击叶子树面板会隐藏
但是在隐藏后，如果我立即单击面板的标题，折叠的面板不会立即展开。
隐藏 1-2 秒后，它会在点击时展开。 我想知道这个的原因和解决办法。

fiddle link

请帮我解决这个问题。 提前谢谢你。

Answer 1

您需要添加几个 CSS 规则来覆盖奇怪的 left 值，该值被放置在为树面板动画生成的 div 上。

// Force the tree panel to always be 25px from the left.
// NOTE: `window-1009-body` is dynamically generated, and it's possible that its
// ID will change. You'll want to find a more permanent way to reference it.
// Perhaps add a CSS class to that element, if possible?
#window-1009-body > #treeMenu {
    left: 25px !important;
}

// Override the left value for the dynamically generated div used for animating
// the tree panel.
*[id$='anim-wrap-for-treeMenu'] {
    left: 0px !important;
}

本质上，我们稍微改变了 ExtJS 结构，以在树形菜单上添加一个有效的左值，而不是树形菜单的容器。我没有测试太多，所以我不确定这可能会影响什么，乍一看，一切看起来都不错。