Apr 28, 2023, 8:36 AM
Scrolling large grid with components
Hello
I apologize that this problem is hardly to reproduce. Basically the problem is that I have pretty large grid with component columns inside and when scroling quickly here and there, time to time, components does not render properly.
After playing for a while I got it reproduced on sample below, but sometimes takes a minute or two of playing.
Screenshots shows what I mean ( practically empty grid, while the scrollbar is not at the begining or at the end, or some components rendered and some not)
So - to reproduce - click "simulate problem" button, and then play with scrollbar few times.
Any advice?
Code:
I apologize that this problem is hardly to reproduce. Basically the problem is that I have pretty large grid with component columns inside and when scroling quickly here and there, time to time, components does not render properly.
After playing for a while I got it reproduced on sample below, but sometimes takes a minute or two of playing.
Screenshots shows what I mean ( practically empty grid, while the scrollbar is not at the begining or at the end, or some components rendered and some not)
So - to reproduce - click "simulate problem" button, and then play with scrollbar few times.
Any advice?
Code:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
<script>
var template = '<span style="color:{0};">{1}</span>';
function simulateProblem() {
var grid = Ext.getCmp('GridPanel1')
var toAdd = [];
grid.store.filterBy(function (item) {
return item.get('hidden') == false;
});
grid.suspendEvents();
//grid.store.suspendEvents();
grid.getView().suspendEvents();
for (var i = 0; i < 10000; i++) {
toAdd.push({
id: i,
company: 'company' + i,
hidden: i % 3 == 0
});
}
grid.store.add(toAdd);
grid.resumeEvents();
//grid.store.resumeEvents();
grid.getView().resumeEvents();
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Namespace="" Theme="Gray" />
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:Panel runat="server" id="rootPanel">
<LayoutConfig>
<ext:BorderLayoutConfig />
</LayoutConfig>
<Items>
<ext:Panel runat="server" Region="West" Title="Menu" Width="300" ID="menuPanel">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Button runat="server" OnClientClick="simulateProblem()" Text="Simulate problem"></ext:Button>
</Items>
</ext:Panel>
<ext:Container runat="server" Region="Center" flex="1" id="centerContainer">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Container runat="server" Layout="vbox">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:GridPanel Flex="1"
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="800"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="True" PageSize="10" RemoteSort="false" RemotePaging="false">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="company" />
<ext:ModelField Name="hidden" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:ComponentColumn DataIndex="company" Text="Company" Flex="1" runat="server" Editor="true">
<Component>
<ext:TextField runat="server" MaxLength="64" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn DataIndex="IsRetired" Text="Retired" runat="server" Editor="true">
<Component>
<ext:Checkbox runat="server" />
</Component>
</ext:ComponentColumn>
<ext:CommandColumn Width="70">
<Commands>
<ext:GridCommand Icon="BinClosed" CommandName="Delete" Text="Delete">
<ToolTip Text="Delete" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Multi" />
</SelectionModel>
<View>
<ext:GridView runat="server" StripeRows="true" />
</View>
</ext:GridPanel>
</Items>
</ext:Container>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
