Hi FabrÃ*cio,
thank you for the reaction. The test case goes here:
@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",
html: ui.charAt(0).toUpperCase() + ui.slice(1),
ui: ui,
iconCls: icon
}
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).AlignmentSpec("t-t").Vertical(true)
.Defaults(c =>
{
c.Add(new Parameter() { Name = "maxWidth", Value = "400" });
c.Add(new Parameter() { Name = "alwaysOnTop", Value = "true" });
})
)
)
)
)
</body>
</html>
<script type="text/javascript">
Ext.onReady(function () {
Ext.getCmp("version").setText("Ext JS " + Ext.getVersion().version + " | " + "Ext.NET " + Ext.net.Version);
});
</script>
There are several issues with Ext.net.InfoPanelQueue.removeAll() function and from line 100 in the test case you see a copy of the original code that I slightly modified.
1. Typo was obvious, so the line 112 is correct now.
2. Run test case, add Info and Success message (in that order), filter Info messages and click 'Remove All' button:
Cannot read property 'hidden' of undefined
3. Comment out the line 109 which I added, run test case and click 'Remove All' button:
Cannot read property 'length' of undefined
4. I'm also curious why the number of items left in the queue is not 0 at the end of the removeAll() function. Run test case, add some messages and click the "Remove All" button. As you can see, the console.log still shows the number of messages before removal.
Kind regards
Dan