[CLOSED] Runtime JS error 'TypeError: Ext.fly(...) is null'

  1. #1

    [CLOSED] Runtime JS error 'TypeError: Ext.fly(...) is null'

    Hi,

    We are facing a runtime JS error 'TypeError: Ext.fly(...) is null' when we implement drag and drop grids into a window.

    Steps to reproduce the error:

    - click on the button "Show Swap Grid"
    - when the window appears, swap records using drag and drop.
    - close the window
    - click again on the button "Show Swap Grid"
    - when the window appears, swap records using drag and drop. And you will have the error.

    Could you find code sample below:

    ResearchController

    public class ResearchController : Controller
        {
            public ActionResult Research()
            {
                return View();
            }
    
            public ActionResult GenericSwapGridWindow()
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
                return pr;
            }
    
            public ActionResult GenericSwapGridView(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                return pr;
            }
    
            public ActionResult GenericDDSwapGridView(String containerID)
            {
                Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
                return pr;
            }
            public AjaxStoreResult GetData()
            {
                AjaxStoreResult result = new AjaxStoreResult();
                List<obj> list = new List<obj>();
                for (int i = 0; i < 3; i++)
                {
                    obj record = new obj();
                    record.Name = "name " + i;
                    record.Column1 = "Column1 " + i;
                    record.Column2 = "Column2 " + i;
                    list.Add(record);
                }
                result.Data = list;
                return result;
            }
            public class obj
            {
                private string name;
    
                public string Name
                {
                    get { return name; }
                    set { name = value; }
                }
                private string column1;
    
                public string Column1
                {
                    get { return column1; }
                    set { column1 = value; }
                }
                private string column2;
    
                public string Column2
                {
                    get { return column2; }
                    set { column2 = value; }
                }
            }
        }
    Research.aspx
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
    <script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var onContainerOver = function (dz, grid, dd, e, data) {
                    return dd.grid !== grid ? dz.dropAllowed : dz.dropNotAllowed;
                };
    
                var onContainerDrop = function (grid, dd, e, data) {
                    if (dd.grid !== grid) {
                        Ext.each(data.selections, function (r) {
                            dd.grid.store.remove(r);
                        });
                        grid.store.add(data.selections);
                        return true;
                    } else {
                        return false;
                    }
                };
    
    
                var getRepairXY = function (e, dd) {
                    if (this.dragData.selections.length > 0) {
                        var foundItem = dd.grid.store.find('Name', this.dragData.selections[0].data.Name);
                        var myRow = dd.grid.getView().getRow(foundItem);
                        this.invalidRow = myRow;
                        var xy = Ext.fly(myRow).getXY();
                        return xy;
                    }
                    return false;
                };
    
                var setDD = function () {
                    this.getView().dragZone.getRepairXY = getRepairXY;
                };
                var getDragDropText = function () {
                    var buf = [];
    
                    buf.push("<ul>");
    
                    Ext.each(this.getSelectionModel().getSelections(), function (record) {
                        buf.push("<li>" + record.data.Name + "</li>");
                    });
    
                    buf.push("</ul>");
    
                    return buf.join("");
                };
                var addClick = function () {
                    $('#win_div').load('/Research/GenericSwapGridWindow',
            {
                'containerID': 'win_div'
            },
                  function (result, request) {
                  }
                );
                };
            </script>
        </ext:XScript>
    </head>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <body>
        <ext:Viewport runat="server" >
            <Items>
                <ext:Button ID="_btn" Text="Show Swap Grid" runat="server">
                    <Listeners>
                        <Click Handler="addClick();" />
                    </Listeners>
                </ext:Button>
            </Items>
            <Content>
                <div id="win_div" />
            </Content>
        </ext:Viewport>
    </body>
    </html>
    GenericDDSwapGridView.ascx
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:Panel ID="Panel1" runat="server" Width="650" Height="300">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <West MarginsSummary="5 5 5 5">
                    <ext:GridPanel ID="GridPanel1" runat="server" DDGroup="GridDDGroup"
                        EnableDragDrop="true" StripeRows="true" AutoExpandColumn="Name" Width="325" Title="Left">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Proxy>
                                    <ext:HttpProxy Url="/Research/GetData">
                                    </ext:HttpProxy>
                                </Proxy>
                                <Reader>
                                    <ext:JsonReader TotalProperty="total" Root="data">
                                        <Fields>
                                            <ext:RecordField Name="Name" />
                                            <ext:RecordField Name="Column1" />
                                            <ext:RecordField Name="Column2" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ColumnID="Name" Header="Record Name" Width="160" DataIndex="Name"  />
                                <ext:Column Header="Column 1" Width="60" DataIndex="Column1" />
                                <ext:Column Header="Column 2" Width="60" DataIndex="Column2" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <GetDragDropText Fn="getDragDropText" />
                        <Listeners>
                            <Render Fn="setDD" />
                        </Listeners>
                    </ext:GridPanel>
                </West>
                <Center MarginsSummary="5 5 5 0">
                    <ext:GridPanel ID="GridPanel2" runat="server" DDGroup="GridDDGroup" EnableDragDrop="true"
                        StripeRows="true" AutoExpandColumn="Name" Width="325" Title="Right">
                        <Store>
                            <ext:Store ID="Store2" runat="server">
                                <Reader>
                                    <ext:JsonReader>
                                        <Fields>
                                            <ext:RecordField Name="Name" />
                                            <ext:RecordField Name="Column1" />
                                            <ext:RecordField Name="Column2" />
                                        </Fields>
                                    </ext:JsonReader>
                                </Reader>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ColumnID="Name" Header="Record Name" Width="160" DataIndex="Name" />
                                <ext:Column Header="Column 1" Width="60" DataIndex="Column1" />
                                <ext:Column Header="Column 2" Width="60" DataIndex="Column2" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
                        </SelectionModel>
                        <GetDragDropText Fn="getDragDropText" />
                        <Listeners>
                            <Render Fn="setDD" />
                        </Listeners>
                    </ext:GridPanel>
                </Center>
            </ext:BorderLayout>
        </Items>
        <BottomBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                    <ext:Button ID="Button1" runat="server" Text="Reset both grids">
                        <Listeners>
                            <Click Handler="Store1.loadData(Store1.proxy.data);Store2.removeAll();" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </BottomBar>
    </ext:Panel>
    <ext:DropZone ID="DropZone1" runat="server" Target="={GridPanel1.view.scroller.dom}"
        Group="GridDDGroup" ContainerScroll="true">
        <OnContainerDrop Handler="return onContainerDrop(GridPanel1, source, e, data);" />
        <OnContainerOver Handler="return onContainerOver(this, GridPanel1, source, e, data);" />
    </ext:DropZone>
    <ext:DropZone ID="DropZone2" runat="server" Target="={GridPanel2.view.scroller.dom}"
        Group="GridDDGroup" ContainerScroll="true">
        <OnContainerDrop Handler="return onContainerDrop(GridPanel2, source, e, data);" />
        <OnContainerOver Handler="return onContainerOver(this, GridPanel2, source, e, data);" />
    </ext:DropZone>
    GenericSwapGridWindow.ascx
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:Window runat="server" ID="_swapGrd" AutoHeight="true" Width="700" CloseAction="Close"
        Modal="true" Constrain="true" Shadow="None" Maximizable="true">
        <Items>
            <ext:Panel runat="server" ID="_pnl" Layout="FitLayout">
                 <AutoLoad NoCache="true" Url="/Research/GenericDDSwapGridView" AutoDataBind="true" ShowMask="true">
                    <Params>
                        <ext:Parameter Name="containerID" Value="#{_pnl}" Mode="Value" />
                    </Params>
                </AutoLoad>
            </ext:Panel>
        </Items>
    </ext:Window>
    Thank you in advance.
    Last edited by Daniil; Dec 30, 2013 at 1:02 PM. Reason: [CLOSED]
  2. #2
    Hi @Daly_AFm

    We are investigating.
  3. #3
    Hello!

    Couldn't reproduce. What version of Ext.NET 1.x do you use? Also, could you provide your browser name and version?
  4. #4
    The issue is not reproducible using Ext.NET 1.6 but is reproducible with Ext.NET 1.7.

    We will investigate this issue.
  5. #5
    Quote Originally Posted by Baidaly View Post
    The issue is not reproducible using Ext.NET 1.6 but is reproducible with Ext.NET 1.7.

    We will investigate this issue.
    Indeed, we are using Ext.NET 1.7
    Tests done with the following browsers:
    • IE 8
    • Chrome
    • Firefox


    Thank you.
  6. #6
    The problem is that the way how you load Window is not good because it doesn't destroy all child elements even if you use CloseAction="Close".

    Right now you can destroy the DropZones manually like that:

    <ext:Window runat="server" ID="_swapGrd" AutoHeight="true" Width="700" CloseAction="Close" AutoDestroy="true"
        Modal="true" Constrain="true" Shadow="None" Maximizable="true">
        <Items>
            <ext:Panel runat="server" ID="_pnl" Layout="FitLayout">
                 <AutoLoad NoCache="true" Url="/Research/GenericDDSwapGridView" AutoDataBind="true" ShowMask="true">
                    <Params>
                        <ext:Parameter Name="containerID" Value="#{_pnl}" Mode="Value" />
                    </Params>
                </AutoLoad>
            </ext:Panel>
        </Items>
        <Listeners>
            <BeforeClose Handler="DropZone1.destroy(); DropZone2.destroy();" />
        </Listeners>
    </ext:Window>
    In order to investigate this issue can you say, do you need to jQuery to load content?
  7. #7
    Quote Originally Posted by Baidaly View Post

    In order to investigate this issue can you say, do you need to jQuery to load content?
    We can load the window using
    var addClick = function () {
                    win_div.load(
                {
                    url: "/Research/GenericSwapGridWindow",
                    params:
                            {
                                'containerID': 'win_div'
                            },
                    scripts: true
                });
                };
    And we have to change
    <Content>
           <div id="win_div" />
    </Content>
    by
    <ext:Panel runat="server" ID="win_div" Header="false"  Border="false"/>
    After adding the new listener to destroy drop zones, it works fine. So we will use it as a workaround.

Similar Threads

  1. Replies: 2
    Last Post: Nov 08, 2013, 2:24 PM
  2. Replies: 1
    Last Post: Sep 22, 2012, 8:08 PM
  3. Replies: 3
    Last Post: Mar 04, 2011, 11:08 AM
  4. Replies: 2
    Last Post: Mar 12, 2010, 8:33 AM
  5. Replies: 0
    Last Post: Aug 27, 2009, 6:13 PM

Tags for this Thread

Posting Permissions