Jul 25, 2018, 8:51 AM
[CLOSED] InfoPanel animation
Hello support team,
when using InfoPanel animation, the message first appears for a very short time at the starting position (flashes at the top of the viewport) and only then the animation starts. Please take a look at the test case:
Thank you for your help.
Kind regards
Dan
when using InfoPanel animation, the message first appears for a very short time at the starting position (flashes at the top of the viewport) and only then the animation starts. Please take a look at the test case:
@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "InfoPanel";
Layout = null;
var X = Html.X();
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
<script type="text/javascript">
var showInfo = function (ui) {
var ts = getTimestamp();
var cfgInfoPanel = {
title: "UI " + ui.charAt(0).toUpperCase() + ui.slice(1),
html: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
ui: ui,
alignmentEl: App._nelisViewport_CENTER.el,
alignment: 't-t',
maxWidth: 400,
animateShow: function () {
this.el.animate({
duration: 2000,
easing: "backIn",
from: {
opacity: 0,
top: this.alignmentEl.getY()
},
to: {
opacity: 1,
top: this.alignmentEl.getY() + 25
}
});
},
animateHide: function () {
this.el.animate({
duration: 2000,
easing: "backOut",
from: {
opacity: 1,
top: this.alignmentEl.getY() + 25
},
to: {
opacity: 0,
top: this.alignmentEl.getY() + 50
},
listeners: {
afteranimate: function (anim) {
var cfg = anim.target.target.el.component.config;
var cfgLog = {
queue: "messagelog",
ui: ui,
tag: ui,
pinned: true,
showPin: true
};
cfgLog.html = cfg.html + "<p style='font-size: smaller;'>" + ts + "</p>";
cfgLog.title = cfg.title;
Ext.Msg.info(cfgLog);
updateLogTotal();
}
}
});
}
}
Ext.Msg.info(cfgInfoPanel);
}
var getTimestamp = function () {
var date = new Date();
return ("0" + date.getHours()).slice(-2) + ":" + ("0" + date.getMinutes()).slice(-2) + ":" + ("0" + date.getSeconds()).slice(-2);
}
var updateLogTotal = function (num) {
Ext.getCmp("MessageLogTotal").setValue("Total Messages: " + Ext.net.InfoPanelQueue.queues["messagelog"].getItems().length);
}
</script>
</head>
<body>
@(Html.X().ResourceManager())
@(Html.X().Viewport()
.ID("_nelisViewport")
.Layout(LayoutType.Border)
.Items(
Html.X().Panel()
.ID("_nelisViewport_TOP")
.Region(Region.North)
.Items(X.Toolbar().Items(X.Button().ID("version").Text("Toolbar Button"))),
Html.X().Panel()
.ID("_nelisViewport_LEFT")
.Region(Region.West)
.Width(180)
.MaxWidth(300)
.Layout(LayoutType.Fit)
.Title("Allegro Menu"),
Html.X().Panel()
.ID("_nelisViewport_CENTER")
.Region(Region.Center)
.BodyPadding(12)
.Items(
X.Container().Layout(LayoutType.Column).Items(
X.Button().Text("Primary").Icon(Icon.Application).Width(100).Handler("showInfo('primary')"),
X.Button().Text("Info").Icon(Icon.Information).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('info')"),
X.Button().Text("Success").Icon(Icon.Accept).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('success')"),
X.Button().Text("Danger").Icon(Icon.Exclamation).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('danger')"),
X.Button().Text("Warning").Icon(Icon.Error).Width(100).MarginSpec("0 0 0 10").Handler("showInfo('warning')")
),
X.Panel().ID("log").Flex(1).OverflowY(Overflow.Auto).LayoutConfig(new VBoxLayoutConfig() { Align = VBoxAlign.Stretch })
.Title("Info Panel")
.Width(300)
.Height(500)
.MarginSpec("20 0 0 0")
.AlwaysOnTop(true)
.DockedItems(
X.Toolbar().Dock(Dock.Top).Items(
X.DisplayField().ID("MessageLogTotal").Text("Total Messages: 0").Flex(1)
)
)
.Bin(
X.InfoPanelQueue().ID("messagelog").Name("messagelog").Container("#{log}").Sliding(false).AddToEnd(false)
.Listeners(l => l.Remove.Handler = "updateLogTotal();")
)
)
)
)
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setText("Ext JS " + Ext.getVersion().version + " | " + "Ext.NET " + Ext.net.Version);
});
</script>Thank you for your help.
Kind regards
Dan
Last edited by fabricio.murta; Jul 27, 2018 at 10:04 PM.
