[OPEN] [#1835] Strange error on component destroy

[lbrohan]

Hello

If I take following js config

Ext.define('TestControl', {
    alias: 'widget.EDMSAdmin_DynamicControls_User_TestControl',
    height: 500,
    hidden: true,
    __renderTo: null,
    width: 800,
    "extend": "Ext.window.Window",
    items: [{
        border: true,
        frame: true,
        items: [{
            xtype: "container",
            flex: 1,
            items: [{
                flex: 1,
                items: [{
                    store: {
                        model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
                            extend: "Ext.data.Model",
                            fields: [{
                                name: "UserName"
                            }, {
                                name: "UserIdentifier"
                            }, {
                                name: "ObjectId"
                            }],
                            idProperty: "ObjectId"
                        }),
                        type: "paging",
                        autoLoad: true,
                        pageSize: 25,
                        sorters: [{
                            property: "UserName"
                        }],
                        proxy: {
                            type: 'pagingmemory'
                        }
                    },
                    "addPagingToolbar": false,
                    reference: "dgvAllGrid",
                    xtype: "grid",
                    flex: 1,
                    bbar: {
                        xtype: "pagingtoolbar",
                        displayInfo: true,
                        store: "idfbba790a61e63805"
                    },
                    columns: {
                        items: [{
                            flex: 1,
                            dataIndex: "UserName",
                            text: "Name"
                        }, {
                            flex: 1,
                            dataIndex: "UserIdentifier",
                            text: "User Identifier"
                        }, {
                            width: 70,
                            xtype: "commandcolumn",
                            commands: [{
                                xtype: "button",
                                command: "Select",
                                tooltip: {
                                    text: "Select User"
                                },
                                iconCls: "#NoteEdit",
                                text: "Select"
                            }]
                        }]
                    },
                    selModel: {
                        selType: "checkboxmodel",
                        mode: "simple"
                    },
                    viewConfig: {
                        plugins: [{
                            ptype: "gridviewdragdrop",
                            ddGroup: "dgvSelectedGrid",
                            enableDrop: false
                        }],
                        xtype: "gridview"
                    }
                }],
                layout: {
                    type: "vbox",
                    align: "stretch"
                },
                title: "Available Users"
            }, {
                store: {
                    model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
                        extend: "Ext.data.Model",
                        fields: [{
                            name: "UserName"
                        }, {
                            name: "UserIdentifier"
                        }, {
                            name: "ObjectId"
                        }],
                        idProperty: "ObjectId"
                    }),
                    type: "paging",
                    autoLoad: true,
                    sorters: [{
                        property: "UserName"
                    }],
                    proxy: {
                        type: 'pagingmemory'
                    }
                },
                reference: "dgvSelectedGrid",
                xtype: "grid",
                flex: 1,
                bbar: {
                    xtype: "pagingtoolbar",
                    displayInfo: true,
                    store: "id9bd3e4a62fa8fbac"
                },
                title: "Selected Groups",
                columns: {
                    items: [{
                        flex: 1,
                        dataIndex: "UserName",
                        text: "Name"
                    }, {
                        flex: 1,
                        dataIndex: "UserIdentifier",
                        text: "User Identifier"
                    }, {
                        width: 70,
                        xtype: "commandcolumn",
                        commands: [{
                            xtype: "button",
                            command: "Remove",
                            tooltip: {
                                text: "Remove User from selected list"
                            },
                            iconCls: "#Delete",
                            text: "Remove"
                        }]
                    }]
                },
                selModel: {
                    selType: "checkboxmodel",
                    mode: "simple"
                }
            }],
            layout: {
                type: "hbox",
                align: "stretch"
            }
        }],
        layout: {
            type: "vbox",
            align: "stretch"
        }
    }],
    layout: "fit",
    buttons: [{
        reference: "btnSave",
        iconCls: "#Disk",
        text: "Save"
    }, {
        reference: "btnClose",
        iconCls: "#Cancel",
        text: "Close"
    }],
    closeAction: "destroy",
    title: "User Search",
    iconCls: "#Book",
    hidden: true,
    modal: true
});

and then

var x= new TestControl();
x.show();
x.destroy()

I get Cannot read property 'apply' of nul

it has something with rebinding store to null when the grid is destroyed. As well if I remove drop groups the problem will go away.

Is there any reason why I'm getting this error?

Note that js code above is retrieved (in reality from far more complex) ascx as follows and calling ComponentLoader.ToConfig

<ext:Window runat="server" Width="800" Height="500" Modal="True" Icon="Book" CloseAction="Destroy"
    Hidden="true" Title="User Search" Frame="False" Layout="fit" >

    <Items>
        <ext:Panel Frame="true" runat="server" Border="true">
            <LayoutConfig>
                <ext:VBoxLayoutConfig Align="Stretch" />
            </LayoutConfig>
            <Items>
                
                <ext:Container runat="server" Flex="1">
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Align="Stretch" />
                    </LayoutConfig>
                    <Items>


                        <ext:Panel runat="server" Title="Available Users" Flex="1" Frame="False">

                            <LayoutConfig>
                                <ext:VBoxLayoutConfig Align="Stretch" />
                            </LayoutConfig>
                            <Items>
                                <ext:GridPanel runat="server" Reference="dgvAllGrid" Flex="1" AddPagingToolbar="false">
                                    <View>
                                        <ext:GridView runat="server">
                                            <Plugins>
                                                <ext:GridDragDrop runat="server" EnableDrop="false" DDGroup="dgvSelectedGrid" />
                                            </Plugins>
                                        </ext:GridView>
                                    </View>
                                    <ColumnModel>
                                        <Columns>
                                            <ext:Column DataIndex="UserName" Text="Name" Flex="1" />
                                            <ext:Column DataIndex="UserIdentifier" Text="User Identifier" Flex="1" />
                                            <ext:CommandColumn Width="70">
                                                <Commands>
                                                    <ext:GridCommand CommandName="Select" Text="Select" Icon="NoteEdit">
                                                        <ToolTip Text="Select User" />
                                                    </ext:GridCommand>
                                                </Commands>

                                            </ext:CommandColumn>
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:CheckboxSelectionModel runat="server" Mode="Simple" />
                                    </SelectionModel>
                                    <Store>
                                        <ext:Store runat="server" PageSize="25" AutoLoad="true" RemoteSort="false" RemotePaging="false">
                                           
                                            <Sorters>
                                                <ext:DataSorter Property="UserName"></ext:DataSorter>
                                            </Sorters>
                                            <Model>
                                                <ext:Model runat="server" IDProperty="ObjectId">
                                                    <Fields>
                                                        <ext:ModelField Name="UserName" />
                                                        <ext:ModelField Name="UserIdentifier" />
                                                        <ext:ModelField Name="ObjectId" />
                                                        
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <BottomBar>
                                        <ext:PagingToolbar runat="server" HideRefresh="false" />
                                    </BottomBar>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>

                       
                        <ext:GridPanel runat="server" Reference="dgvSelectedGrid" Flex="1"  Title="Selected Groups">
                            
                            <ColumnModel>
                                <Columns>

                                    <ext:Column DataIndex="UserName" Text="Name" Flex="1" />
                                    <ext:Column DataIndex="UserIdentifier" Text="User Identifier" Flex="1" />
                                    <ext:CommandColumn Width="70">
                                        <Commands>
                                            <ext:GridCommand CommandName="Remove" Text="Remove" icon="Delete">
                                                <ToolTip Text="Remove User from selected list" />
                                            </ext:GridCommand>
                                        </Commands>

                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:CheckboxSelectionModel runat="server" Mode="Simple" />
                            </SelectionModel>
                            <Store>
                                <ext:Store runat="server">
                                    <Sorters>
                                        <ext:DataSorter Property="UserName"></ext:DataSorter>
                                    </Sorters>
                                    <Model>
                                        <ext:Model runat="server" IDProperty="ObjectId">
                                            <Fields>
                                                <ext:ModelField Name="UserName" />
                                                <ext:ModelField Name="UserIdentifier" />
                                                <ext:ModelField Name="ObjectId" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <BottomBar>
                                <ext:PagingToolbar runat="server" />
                            </BottomBar>
                        </ext:GridPanel>
                    </Items>
                </ext:Container>
            </Items>

        </ext:Panel>
    </Items>
    <Buttons>
        <ext:Button Reference="btnSave" runat="server" Text="Save" Icon="Disk" />
        <ext:Button Reference="btnClose" runat="server" Text="Close" Icon="Cancel" />
    </Buttons>

</ext:Window>

[fabricio.murta]

Hello @Ibrohan!

I cannot reproduce the error you are facing. The x.destroy() runs without issue, even if I close the window before calling it. Maybe we'd need a bit more context to reproduce this. You should try making a simple page with just the panel, and add components until it starts to reproduce the error. Then it will probably be easier to reproduce what's really required to trigger the error.

Looking forward to your follow-up!

[lbrohan]

Ok thanks

Here's the page

click the buton few times and error will raise ( not sure why in my real application it popup every time)

I guess something is wrong with class definition, but I do not see what exactly

<%@ Page Title="" Language="C#" %>


<!DOCTYPE html>

<html>
<head runat="server">
    
    
</head>
<script>
	function raiseError() {
		var x = new TestControl();
		x.show();
        x.destroy()
	}
</script>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server"  MarginSpec="0 0 10 0">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
        </LayoutConfig>
        <Items>
           <ext:Button runat="server" OnClientClick="raiseError" Text="Click me couple times"></ext:Button>
        </Items>
    </ext:Viewport>


<script>
	Ext.define('TestControl', {
		alias: 'widget.EDMSAdmin_DynamicControls_User_TestControl',
		height: 500,
		hidden: true,
		__renderTo: null,
		width: 800,
		"extend": "Ext.window.Window",
		items: [{
			border: true,
			frame: true,
			items: [{
				xtype: "container",
				flex: 1,
				items: [{
					flex: 1,
					items: [{
						store: {
							model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
								extend: "Ext.data.Model",
								fields: [{
									name: "UserName"
								}, {
									name: "UserIdentifier"
								}, {
									name: "ObjectId"
								}],
								idProperty: "ObjectId"
							}),
							type: "paging",
							autoLoad: true,
							pageSize: 25,
							sorters: [{
								property: "UserName"
							}],
							proxy: {
								type: 'pagingmemory'
							}
						},
						"addPagingToolbar": false,
						reference: "dgvAllGrid",
						xtype: "grid",
						flex: 1,
						bbar: {
							xtype: "pagingtoolbar",
							displayInfo: true,
							store: "idfbba790a61e63805"
						},
						columns: {
							items: [{
								flex: 1,
								dataIndex: "UserName",
								text: "Name"
							}, {
								flex: 1,
								dataIndex: "UserIdentifier",
								text: "User Identifier"
							}, {
								width: 70,
								xtype: "commandcolumn",
								commands: [{
									xtype: "button",
									command: "Select",
									tooltip: {
										text: "Select User"
									},
									iconCls: "#NoteEdit",
									text: "Select"
								}]
							}]
						},
						selModel: {
							selType: "checkboxmodel",
							mode: "simple"
						},
						viewConfig: {
							plugins: [{
								ptype: "gridviewdragdrop",
								ddGroup: "dgvSelectedGrid",
								enableDrop: false
							}],
							xtype: "gridview"
						}
					}],
					layout: {
						type: "vbox",
						align: "stretch"
					},
					title: "Available Users"
				}, {
					store: {
						model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
							extend: "Ext.data.Model",
							fields: [{
								name: "UserName"
							}, {
								name: "UserIdentifier"
							}, {
								name: "ObjectId"
							}],
							idProperty: "ObjectId"
						}),
						type: "paging",
						autoLoad: true,
						sorters: [{
							property: "UserName"
						}],
						proxy: {
							type: 'pagingmemory'
						}
					},
					reference: "dgvSelectedGrid",
					xtype: "grid",
					flex: 1,
					bbar: {
						xtype: "pagingtoolbar",
						displayInfo: true,
						store: "id9bd3e4a62fa8fbac"
					},
					title: "Selected Groups",
					columns: {
						items: [{
							flex: 1,
							dataIndex: "UserName",
							text: "Name"
						}, {
							flex: 1,
							dataIndex: "UserIdentifier",
							text: "User Identifier"
						}, {
							width: 70,
							xtype: "commandcolumn",
							commands: [{
								xtype: "button",
								command: "Remove",
								tooltip: {
									text: "Remove User from selected list"
								},
								iconCls: "#Delete",
								text: "Remove"
							}]
						}]
					},
					selModel: {
						selType: "checkboxmodel",
						mode: "simple"
					}
				}],
				layout: {
					type: "hbox",
					align: "stretch"
				}
			}],
			layout: {
				type: "vbox",
				align: "stretch"
			}
		}],
		layout: "fit",
		buttons: [{
			reference: "btnSave",
			iconCls: "#Disk",
			text: "Save"
		}, {
			reference: "btnClose",
			iconCls: "#Cancel",
			text: "Close"
		}],
		closeAction: "destroy",
		title: "User Search",
		iconCls: "#Book",
		hidden: true,
		modal: true
	});

</script>
</body>
</html>

[fabricio.murta]

Hello @Ibrohan!

Your test case seems full of unrelated entities to the issue, like columns, various grid panels... Things that could be just removed and still have the issue reproducible. This makes it a bit hard to focus on the issue you want us to help with.

In fact, if you just remove the paging toolbars from both grid panels, the issue no longer reproduces. If you temporarily remove them from your real application, do you still reproduce the issue?

If so, this seems to be a race condition related to the paging toolbar. There is a 50ms delay in a "last update" the paging toolbar does when the grid store gets its data destroyed. So if you are creating and destroying grid panels too fast, especially if they have lots of data to process (which is probably the case you have in production), it may happen that the "last load" process happens after the paging toolbar has already been destroyed due to extra delay in the "async" procedure.

There are some ways to avoid this issue:

1. add a Buffer="100" to the button's click listener: that is, never run the build + destroy cycle within a 100ms delay, letting the whole destruction process go before trying to instantiate+destroy another.

<ext:Button runat="server" Text="Click me couple times">
	<Listeners>
		<Click Fn="raiseError" Buffer="100" />
	</Listeners>
</ext:Button>

2. change the paging toolbar's onLoad internal event to simply skip entirely if the paging toolbar is marked as being destroyed or is currently destroyed at the time the load is run.

Ext.define("gh1835", {
	override: "Ext.toolbar.Paging",
	onLoad: function () {
        if (this.isDestroying || this.isDestroyed) return;

		return this.callParent(arguments);
    }
});

We have logged this issue in github under #1835. We'll post a follow-up here once a definitive fix for the issue makes it into Ext.NET.

[lbrohan]

Thanks for help, the answer was perfect - it was causing issue
(even I wonder that I do not have that many records as you described)

Sorry for bit longer example, its still much shorter then the form where I took it from

You can close this thread

[fabricio.murta]

Thanks for the feedback and glad it helped!