Question

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

北部地区有一个标题为面板南部地区是一个小组，是一个小组东部地区也是小组西区有树小组。

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

}）;

对于Tree Panel，代码如下所示。

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

}）;

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

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规则来覆盖放置在为树面板动画生成的div上的奇怪left值。

// 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结构，以便在treemenu上使用有效的左值而不是treemenu的容器。我没有测试太多，所以我不确定这可能会影响到什么，乍一看看起来还不错。

隐藏后，树面板延迟扩展

1 个答案: