Jul 20, 2018, 12:00 PM
[CLOSED] InfoPanel alignment
Hello support team,
I have encountered the InfoPanel alignment issue in following test case:
2. Defined as default parameter of the queue (line 199, expected scenario): alignment is ignored (although the message itself is displayed well).
3. When the alignment is defined directly on the InfoPanel (lines 68, 69): the message is displayed completely improperly (even if it is correctly aligned).
Am I missing something? Thank you.
Kind regards
Dan
I have encountered the InfoPanel alignment issue in following 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 filter = function (ui) {
var queue = Ext.net.InfoPanelQueue.queues["messagelog"],
container = queue.container;
if (!ui && !queue.filtered) {
return;
}
if (!ui) {
App.ClearFilterBtn.toggle(true);
}
queue.filtered = !!ui;
if (container && container.items) {
Ext.suspendLayouts();
container.items.each(function (item) {
(!ui || ui == item.tag) ? item.show() : item.hide(false);
});
Ext.resumeLayouts(true);
}
}
var showInfo = function (ui) {
var icon;
switch (ui) {
case "info":
icon = "#Information";
break;
case "success":
icon = "#Accept";
break;
case "danger":
icon = "#Exclamation";
break;
case "warning":
icon = "#Error";
break;
default:
icon = "#Application";
}
var cfgInfoPanel = {
queue: "infopanel",
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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
ui: ui,
iconCls: icon
//alignmentEl: App._nelisViewport_CENTER.el,
//alignment: 't-t'
}
Ext.Msg.info(cfgInfoPanel);
var cfgLog = {
queue: "messagelog",
ui: ui,
tag: ui,
pinned: true,
showPin: true
};
cfgLog.html = cfgInfoPanel.html + "<p style='font-size: smaller;'>" + getTimestamp() + "</p>";
cfgLog.title = cfgInfoPanel.title;
cfgLog.iconCls = cfgInfoPanel.iconCls;
Ext.Msg.info(cfgLog);
updateLogTotal();
}
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);
}
// TEMPORARY SOLUTION. Copy of Ext.net.InfoPanelQueue.removeAll().
var removeAll = function (animate) {
var queue = Ext.net.InfoPanelQueue.queues["messagelog"];
var items = queue.container ? queue.container.items : queue.items,
item,
align,
i, len;
if (!items) return;
for (i = 0, len = items.length; i < len; i++) {
item = items.getAt(i);
if (!item.hidden && item.rendered && animate !== false) {
item.destroy();
} else {
if (queue.container) {
queue.container.remove(item);
} else {
align = true;
}
queue.fireEvent("remove", queue, item);
}
}
if (align) {
queue.items.removeAll();
queue.align();
}
console.log("number of items: ", items.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),
X.Button().Text("Remove All").Icon(Icon.Delete).OnClientClick("removeAll(); filter();")
),
X.Toolbar().Dock(Dock.Top).Items(
X.Button().ID("ClearFilterBtn").Text("All").Pressed(true).EnableToggle(true).ToggleGroup("log").OnClientClick("filter();"),
X.Button().Text("Info").EnableToggle(true).ToggleGroup("log").Icon(Icon.BulletBlue).OnClientClick("filter('info');"),
X.Button().Text("Success").EnableToggle(true).ToggleGroup("log").Icon(Icon.BulletGreen).OnClientClick("filter('success');"),
X.Button().Text("Danger").EnableToggle(true).ToggleGroup("log").Icon(Icon.BulletRed).OnClientClick("filter('danger');"),
X.Button().Text("Warning").EnableToggle(true).ToggleGroup("log").Icon(Icon.BulletYellow).OnClientClick("filter('warning');")
)
)
.Bin(
X.InfoPanelQueue().ID("messagelog").Name("messagelog").Container("#{log}").Sliding(false).AddToEnd(false)
.Listeners(l => l.Add.Handler = "filter();")
.Listeners(l => l.Remove.Handler = "updateLogTotal();"),
X.InfoPanelQueue().Name("infopanel").Sliding(true).SlideTo(SlideTo.Down).Vertical(true).AlignmentSpec("t-t") //.AlignmentEl("App._nelisViewport_CENTER.el")
.Defaults(c =>
{
c.Add(new Parameter() { Name = "maxWidth", Value = "400" });
c.Add(new Parameter() { Name = "alwaysOnTop", Value = "true" });
c.Add(new Parameter() { Name = "alignmentEl", Value = "App._nelisViewport_CENTER.el" });
})
)
)
)
)
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setText("Ext JS " + Ext.getVersion().version + " | " + "Ext.NET " + Ext.net.Version);
});
</script>
1. Alignment defined as InfoPanelQueue attribute (line 194): Cannot read property 'el' of null
2. Defined as default parameter of the queue (line 199, expected scenario): alignment is ignored (although the message itself is displayed well).
3. When the alignment is defined directly on the InfoPanel (lines 68, 69): the message is displayed completely improperly (even if it is correctly aligned).
Am I missing something? Thank you.
Kind regards
Dan
Last edited by fabricio.murta; Jul 25, 2018 at 3:30 AM.