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
