ExtJS 4.2 可折叠面板展开奇怪的视觉行为答案

【问题标题】：ExtJS 4.2 Collapsible Panel Expand strange visual behaviorExtJS 4.2 可折叠面板展开奇怪的视觉行为
【发布时间】：2014-07-23 03:01:42
【问题描述】：

Panel 是可折叠的，我遇到了一个奇怪的行为。

我的应用在 4.2.1 上运行，但我创建了一个 JSFiddle 来模拟问题：

更新我创建 Sencha Fiddle（更好）https://fiddle.sencha.com/#fiddle/7vk

我有一个包含两个项目的主面板：一个带有flex: 1 的网格和一个底部是collapsible 的面板。

var grid = Ext.create('Ext.grid.Panel',{
        title:'Grid',
        flex: 1,
        columns:[]
    });

    var panel = Ext.create('Ext.panel.Panel',{
        renderTo: Ext.getBody(),
        title:'Hola',
         layout: {
        type: 'vbox',
        align: 'stretch'
    },
        items: [
            {
                xtype: 'grid',
                padding: 10,
                title: 'test',
                columns:[],
                flex: 1,
                border: 1
            },
            {
                xtype: 'panel',
                padding: 10,
                title: 'test',
                collapsible: true,
            collapsed: true,
            height: 300,

                border: 1
            }
        ]
});

当您展开面板时，动画会到达视图的顶部，然后下降。很奇怪。

有什么线索吗？

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs4.2

【解决方案1】：

我在 ExtJS 5 中遇到了同样的问题。如果你真的不需要那个动画，你可以在那个面板上关闭它：animCollapse: false

面板现在应该可以正确折叠了。

【讨论】：

【解决方案2】：

这是因为包含元素的布局事件仅在子元素停止折叠/展开时发生。问题是主容器太小，面板无法展开。由于它的固定位置和大小在动画期间发生了变化，所以它变得像你看到的那样尴尬。

我最好的解决方案是拥有一个更大的容器，这样限制就不会出现。有很多方法可以做到这一点。这是包含在视口中的代码：

Ext.require(['*']);

Ext.onReady(function() {    
    Ext.create('Ext.Viewport', {
        title: 'Hola',
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items:[
            Ext.create('Ext.panel.Panel',{
                title:'Hola',
                region: 'center',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
            items: [
                {
                    xtype: 'grid',
                    title: 'test',
                    columns:[],
                    flex: 1,
                    border: 1
                },
                {
                    xtype: 'panel',
                    title: 'test',
                    collapsible: true,
                    collapsed: true,
                    height: 300,
                    border: 1
                }
            ]
        })        
        ]
    });
});

请看这里：http://jsfiddle.net/mYp4r/

【讨论】：

我看到了同样的动画奇怪的行为。面板标题到另一个面板的顶部一秒钟。