[FIXED] [#1595] [4.7.0] InfoPanelQueue - function removeAll() returns an error

  1. #1

    [FIXED] [#1595] [4.7.0] InfoPanelQueue - function removeAll() returns an error

    Hi there, support team,
    just in case you did not noticed yet...

    Ext.net.InfoPanelQueue.removeAll();
    returns an error Cannot read property 'getAt' of undefined. That's because instead of
    item = item.getAt(i);
    should be
    item = items.getAt(i);
    This function also will also fail if the queue does not contain any items, just like the getItems() function.

    Ext.NET 4.4.1 | Ext JS 6.5.1.345

    Kind regards
    Dan
    Last edited by fabricio.murta; Aug 07, 2018 at 7:41 PM.
  2. #2
    Hello @NewLink!

    Thanks for taking the time to report us this issue!

    While I can find the clear typo in the code I would appreciate if you could share a test case that would help us ensure we are really fixing the issue the way you see it.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    We've just logged the issue under #1595 in github! An update will be posted here as soon as we fix the issue or have news to share.
    Fabrício Murta
    Developer & Support Expert
  4. #4
    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 + "&nbsp;&nbsp;|&nbsp;&nbsp;" + "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
    Last edited by NewLink; Jul 20, 2018 at 10:51 AM.
  5. #5
    Hello! Thanks for the test case!

    And yes, InfoPanelQueue and InfoPanel features will need a good overhaul before we release 4.7.0, thanks for reporting it! If you open the examples in examples explorer (or your test case itself) in recent Ext.NET versions the pop-up is not showing for the first message. We've logged the issue in a separate github entry and will also try to deal with that.

    We are aiming to include all -- or at least most -- fixes in the next release.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello again, Dan!

    We've just applied the fix to Ext.NET code; the fix will make it to the upcoming 4.7.0 Ext.NET release.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] TabPanel1 .RemoveAll throwing a javascript error
    By Geovision in forum 4.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 13, 2018, 6:34 PM
  2. Please help about combo removeall function
    By rickywu in forum 4.x Help
    Replies: 1
    Last Post: Jul 21, 2016, 1:50 AM
  3. Replies: 1
    Last Post: Mar 11, 2015, 9:55 AM
  4. Replies: 6
    Last Post: Apr 02, 2012, 7:37 PM
  5. Replies: 1
    Last Post: Jun 03, 2009, 1:10 PM

Posting Permissions