slideIn和slideOut减小了组件的宽度

Question

有人能帮我解决SlideIn或SlideOut过程中减少组件宽度的问题吗？我使用的是ExtJS 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 });
    });
});

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

问候，shub

Answer 1

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

您需要将面板标记为中心，或者将边框布局替换为适合（请参阅jsfiddle）