트리 숨기기 후 확장 패널 지연

Question

4 개의 영역이있는 테두리 레이아웃이있는 기본보기 포트가 있습니다

북쪽 영역에는 패널 인 헤더가 있습니다.
남쪽 영역은 패널 인 바닥 글입니다.
동쪽 지역도 패널입니다.
서쪽 지역에는 트리 패널이 있습니다.

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 규칙을 추가하여 트리 패널 애니메이션에 대해 생성 된 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; 
} 

는 기본적으로 우리는 대신 treemenu의 컨테이너의 treemenu에 사용을 유효 왼쪽 값을 추가 할 수는 ExtJS 구조를 조금을 변경하고 있습니다. 나는 너무 많이 테스트하지 않았으므로 이것이 어떤 영향을 미칠지 모르겠다. 첫눈에 약간은 괜찮아 보였다.