Dec 27, 2013, 7:35 AM
[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
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]