Why is there a significant delay before showAnimation (Ext.Sheet)

[pentool]

Hello,

I'm using a sheet as a slide-down panel that holds items. You click a button on the toolbar, the sheet slides down (128px height). After you select an item, the sheet slides back up.

When I press the button to show the sheet, there's a delay before the sheet starts sliding down. This delay is directly related to the "delay" config specified for the animation. For example, this is the current config the sheet:

config: {
		style: 'background: transparent; padding: 0; border: 0; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);',
		layout: 'fit',
		modal: false,
		enter: 'top',
		exit: 'top',
		centered: false,
		left: 0,
		height: 128,
		stretchX: true,
		hidden: true,
		showAnimation: {
			type: 'slideIn',
			easing: 'ease-out',
			duration: 5000
		},
		hideAnimation: {
			type: 'slideOut',
			easing: 'ease-in',
			duration: 1000,
			delay: 500
		},
		items: [
			{ xtype: 'mainnavbaritem' }
		]
	}

The "duration" for the "showAnimation" is set to 5000ms, but only for testing this out. At this delay amount, there's a 3 second delay before the sheet starts to slide down. As I reduce the amount, the amount of delay before the sheet starts sliding down also decreases proportionally, but there's still some sort of delay.

Not sure why is this happening. Any ideas?

Thank you!

[pentool]

UPDATE:

It seems the reason this "delay" exist because even though I set the height of the sheet in the config to be 128 pixels, the animation is still working with (eg pushes) a height that is equivalent to the full height of the display area.

I was under the impression (for some reason) that if the height of a component is being set to a certain size, that that IS the height of the component. Apparently it's not. For showing/hiding purposes the animation still uses the height of the display area to animate the sheet and NOT the actual height that was specified in the config.

At this point I'm not sure why this is and/or what the solution...