[CLOSED] [#1831] Notification MessageBox Problem

  1. #1

    [CLOSED] [#1831] Notification MessageBox Problem

    Dears,

    Hope you all safe and healthy.

    Kindly, refer to the following problem:

    Example Link: https://examples5.ext.net/#/MessageB...tion/Overview/

    Steps to demonstrate the problem:

    1. Click on "Content Functionality" from the menu.
    2. Click on "Show with Content Element", and the result will be:

    Click image for larger version. 

Name:	Notification-1.jpg 
Views:	80 
Size:	84.6 KB 
ID:	25441

    3. When you click on the "Show with Content Element" again, the notification will crush in the top left side corner:

    Click image for larger version. 

Name:	Notification-2.jpg 
Views:	81 
Size:	82.2 KB 
ID:	25442

    My code is similar but with auto hide:

                        Ext.Net.Notification.Show(New Ext.Net.NotificationConfig With {
                            .HideDelay = "15000",
                            .Height = "535",
                            .Width = "500",
                            .Title = "<center>قائمة أفضل الموظفين لهذه المبادرة</center>",
                            .ContentEl = "customEl",
                            .AlignCfg = New NotificationAlignConfig With
                                    {
                                        .ElementAnchor = AnchorPoint.BottomLeft,
                                        .TargetAnchor = AnchorPoint.BottomLeft,
                                        .OffsetX = 20,
                                        .OffsetY = -20
                                    },
                            .ShowFx = New FadeIn With {.Options = New FxConfig With {.Duration = 2000}},
                            .HideFx = New FadeOut With {.Options = New FadeOutConfig With {.Duration = 2000, .EndOpacity = 0.25F}}
                        })
    ContentEl = "customEl", is as following:

            <div id="customEl" class="x-hidden">
                <ext:GridPanel
                    runat="server"
                    ID="TopEmpGV"
                    Hidden="true"
                    ClientIDMode="Static"
                    RTL="true"
                    Width="495"
                    Height="535">
                    <Store>
                        <ext:Store ID="TopEmpGVStore" ClientIDMode="Static" runat="server">
                            <Model>
                                <ext:Model ID="TopEmpGVStoreModel" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="Int" />
                                        <ext:ModelField Name="EmployeeEnName" />
                                        <ext:ModelField Name="EmployeeArName" />
                                        <ext:ModelField Name="EmpPhoto" />
                                        <ext:ModelField Name="DoCount" Type="Float" />
                                        <ext:ModelField Name="DoCountDec" Type="Float" />
                                        <ext:ModelField Name="DontCount" Type="Float" />
                                        <ext:ModelField Name="CautionsCount" Type="Float" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:RowNumbererColumn Header="#" Margin="0" Width="40" runat="server"  Align="Center" />  
                            <ext:TemplateColumn
                                runat="server"
                                Align="Center"
                                Text="" 
                                Width="120"
                                DataIndex="PhotoPath" 
                                TemplateString='<img style="width:100px;height:130px;" src="../../Images/EmpPhotos/{EmpPhoto}" />'>
                            </ext:TemplateColumn>                    
                            <ext:Column runat="server" Width="200" Align="Center"  CellWrap="true" Text="الموظف" DataIndex="EmployeeArName"  >
    
                            </ext:Column>
                            <ext:ProgressBarColumn  Flex="2" runat="server" Align="Center" DataIndex="DoCountDec"  Text="مجموع النقاط" />
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </div>
    Kindly, advice.
  2. #2
    Hello @aliabdulla!

    Thanks for the detailed report on how to reproduce the issue, we have able to witness what's up in that example.

    It seems Ext JS memory leaks fixes through time got the best part of this example. Which is a good sign. Fortunately there's a simple fix to that issue: simply switch back the contentEl to its string reference after the component is rendered; the tasks before destroying the component will work fine (like relocating the div to the page) -and- it won't wipe out the div as being tied to the rendered notification via its Ext.net.Notification.contentEl handle.

    To this simply add an BeforeDestroy event binding the content element's ID to the config, so that the "next BeforeDestroy step" still handles moving the content away to a safe place.

    In other words, to that example, where it draws the notification, add the following line:

    listeners.BeforeDestroy.Handler = "this.contentEl = this.contentEl.id;";
    And it should be re-showable. You can benefit from the memory "lifting" if you just avoid the callout to be shown again (using the same contenEl) or produce the DOM element every time you call the callout (instead of defining it in markup) which, well, is probably not the case.

    We have logged this problem under #1831 and will post a follow-up here as soon as we get this fixed and ready to go to the next Ext.NET release!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Well, and hello again!

    We have fixed the issue already and it will be available next public Ext.NET release.

    To ensure the custom listener won't break once you switch to a newer Ext.NET version, set it like this:

    listeners.BeforeDestroy.Handler = "if (Ext.net.Version == '5.2.0') this.contentEl = this.contentEl.id;";
    So that it won't trigger when you upgrade Ext.NET to 5.3.0 or any newer version.

    Hope this is welcome news!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] MessageBox render problem
    By aguidali in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 20, 2014, 10:03 AM
  2. Problem with Notification Box
    By alawibh in forum 2.x Help
    Replies: 1
    Last Post: May 08, 2013, 10:08 AM
  3. Problem with notification
    By feanor91 in forum Open Discussions
    Replies: 5
    Last Post: Sep 05, 2012, 2:03 PM
  4. [CLOSED] Notification from modal window problem
    By xeo4.it in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 27, 2011, 6:53 AM
  5. [CLOSED] is it possible to load panel into Notification or MessageBox
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 04, 2009, 2:09 PM

Posting Permissions