Can someone help me to solve the problem of reducing the width of the component during SlideIn or SlideOut? I am using the Ext JS version 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 });
    });
});

I'd be very grateful if you could help me.

Kind regards, shub