css - 滑入和滑出减少了组件的宽度

Question

谁能帮我解决SlideIn或SlideOut时组件宽度变小的问题？我使用的是 Ext JS 版本 4.1 RC1。

Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0',
            items: [{
                xtype: 'container',
                id: 'con_notification-box',
                cls: 'notification-box',
                hidden: true,
                border: true,
                width: 500,
                height: 0,
                style: {
                    position: 'fixed',
                    minHeight: '75px !important',
                    left: '50%',
                    marginLeft: '-250px',
                    zIndex: '999999',
                    backgroundColor: 'white'
                },
                items:[{
                    xtype: 'container',
                    html: '<p>Insert your information text here.</p>'
                },{
                    xtype: 'container',
                    id: 'con_application-close',
                    cls:   'notification-close',
                    html: '<br />Close'
                }]
            },{
                xtype: 'container',
                html: '<h1 class="x-panel-header">Your title</h1>'
            }]
        }]
    });
    var con_notification_box = Ext.getCmp('con_notification-box').getEl();

    con_notification_box.slideIn('t', {
        easing: 'easeOut',
        duration: 500
    });

    Ext.getCmp('con_application-close').getEl().on('click',function(){
        con_notification_box.slideOut('t', { duration: 2000 });
    });
});

如果你能帮助我，我将不胜感激。

亲切的问候，嘘

Answer 1

关于您要做什么，您的问题不是很清楚。但是您发布的代码不起作用。我让它滑进滑出，但不确定这是否是你的意思: http://jsfiddle.net/dbrin/qDhXg/

您需要将您的面板标记为居中或替换为适合的边框布局(参见 jsfiddle)