Question

我得到了一个可折叠的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
            }
        ]
});

展开面板时，动画会转到视图的顶部，然后会关闭。很奇怪。

有任何线索吗？

Answer 1

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

小组现在应该正确崩溃。

Answer 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/

ExtJS 4.2可折叠面板扩展奇怪的视觉行为

2 个答案: