Originally Posted by
cwolcott
I assume you are still looking at:
Basic Align -> Top Right uses Ghost in its HideFx. In ghosts in v1.2, but just disappears in V2.0
Yes, you are right, I've just investigated the problem.
I think there is also a bug.
http://www.sencha.com/forum/showthread.php?202531
I was able to fix it, please see the example below. But we'd prefer to wait the permanent fix from ExtJS. So, please use the following fix for now.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.dom.Element.override({
ghost: function(anchor, obj) {
var me = this,
beforeAnim;
anchor = anchor || "b";
beforeAnim = function() {
var width = me.getWidth(),
height = me.getHeight(),
xy = me.getXY(),
position = me.getPositioning(),
to = {
opacity: 0
};
switch (anchor) {
case 't':
to.y = xy[1] - height;
break;
case 'l':
to.x = xy[0] - width;
break;
case 'r':
to.x = xy[0] + width;
break;
case 'b':
to.y = xy[1] + height;
break;
case 'tl':
to.x = xy[0] - width;
to.y = xy[1] - height;
break;
case 'bl':
to.x = xy[0] - width;
to.y = xy[1] + height;
break;
case 'br':
to.x = xy[0] + width;
to.y = xy[1] + height;
break;
case 'tr':
to.x = xy[0] + width;
to.y = xy[1] - height;
break;
}
this.to = to;
this.on('afteranimate', function () {
if (me.dom) {
me.hide();
me.clearOpacity();
me.setPositioning(position);
}
});
};
//beginning of the fix
if (obj && obj.listeners) {
if (obj.listeners.beforeanimate) {
obj.listeners.beforeanimate.fn = Ext.Function.createSequence(obj.listeners.beforeanimate.fn, beforeAnim);
} else {
obj.listeners.beforeanimate = {
fn : beforeAnim
}
}
}
//end of the fix
me.animate(Ext.applyIf(obj || {}, {
duration: 500,
easing: 'ease-out',
listeners: {
beforeanimate: {
fn: beforeAnim
}
}
}));
return me;
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Button runat="server" Text="Notify">
<Listeners>
<Click Handler="Ext.net.Notification.show({
hideFx : {
fxName : 'ghost',
args : ['tr']
}
});" />
</Listeners>
</ext:Button>
</body>
</html>