May 25, 2017, 11:31 PM
[FIXED] [#1484] [4.3.0] BufferedScrolling Bug
I have a serious problem in that my buffered scrolled grids that have locking are all broken!
Please help me out ASAP. i was expected to deploy this tonight.
i expect to have 5000 records. Now remove the Locked="true" in ID="RowNumberColumn1" and ID="Column1" and all the records show back up.
Thanks,
/Z
Please help me out ASAP. i was expected to deploy this tonight.
i expect to have 5000 records. Now remove the Locked="true" in ID="RowNumberColumn1" and ID="Column1" and all the records show back up.
Thanks,
/Z
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.TestData(5000);
this.Store1.DataBind();
}
}
private object[] TestData(int count)
{
string[] firstNames = new string[] { "Russel", "Clark", "Steve", "Sam", "Lance", "Robert", "Sean", "David", "Justin", "Nicolas", "Brent" };
string[] lastNames = new string[] { "Wood", "Lewis", "Scott", "Parker", "Ross", "Garcia", "Bell", "Kelly", "Powell", "Moore", "Cook" };
int[] ratings = new int[] { 1, 2, 3, 4, 5 };
int[] salaries = new int[] { 100, 400, 900, 1500, 1000000 };
object[] data = new object[count];
Random rnd = new Random();
for (int i = 0; i < count; i++)
{
int ratingId = rnd.Next(ratings.Length);
int salaryId = rnd.Next(salaries.Length);
int firstNameId = rnd.Next(firstNames.Length);
int lastNameId = rnd.Next(lastNames.Length);
int rating = ratings[ratingId];
int salary = salaries[salaryId];
string name = String.Format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
string id = "rec-" + i;
data[i] = new object[] { id, name, rating, salary };
}
return data;
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Buffered Scrolling - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var jumpToRow = function () {
var me = this,
field = me.up('toolbar').down('#gotoLine');
if (field.isValid()) {
me.up('grid').view.bufferedRenderer.scrollTo(field.getValue() - 1, true);
}
};
var editRecordComplete = function (editor, context) {
var store = context.grid.getStore();
var record = context.record;
};
// this "setGroupStyle" function is called when the GroupingView is refreshed.
var setGroupStyle = function (view) {
var colors = ['olive', 'orange', 'purple', 'red', 'blue', 'fuchsia', 'gray', 'green', 'maroon', 'navy', 'silver', 'teal', 'black']
// get an instance of the Groups
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Buffered Scrolling</h1>
<p>Introduced with Ext.Net 2, the Infinite Scrolling support for GridPanels enables you to load any number of records into a grid without paging.</p>
<p>This grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
<p>This example illustrates loading of all the records up front thus acting as a data buffer used as rows are rendered.</p>
<ext:GridPanel ID="GridPanel1"
runat="server"
Title="Buffered Grid of 5,000 random records"
Width="700"
Height="500">
<Store>
<ext:Store
ID="Store1"
GroupField="rating"
RemoteSort="false"
PageSize="0"
runat="server">
<Model>
<ext:Model ID="Model1" runat="server" ClientIdProperty="name">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="rating" Type="Int" />
<ext:ModelField Name="salary" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Plugins>
<ext:BufferedRenderer ID="BufferedRenderer1" runat="server" LeadingBufferZone="5" TrailingBufferZone="15" />
<ext:CellEditing ID="CellEditing1" ClicksToEdit="1" runat="server">
<Listeners>
<Edit Fn="editRecordComplete" />
</Listeners>
</ext:CellEditing>
</Plugins>
<View>
<ext:GridView ID="GridView1" runat="server" TrackOver="false">
<Listeners>
<Refresh Fn="setGroupStyle" />
<ViewReady Handler="this.on('scroll', setGroupStyle, this, { buffer: 50 });" />
</Listeners>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" PruneRemoved="false" />
</SelectionModel>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:RowNumbererColumn ID="RowNumbererColumn1"
runat="server"
Width="40"
Locked="true"
Sortable="false" />
<ext:Column ID="Column1"
runat="server"
Text="Name"
Locked="true"
DataIndex="name" />
<ext:Column ID="Column2"
runat="server"
Text="Rating"
Width="125"
DataIndex="rating" />
<ext:Column ID="Column3"
runat="server"
Text="Salary"
Width="125"
DataIndex="salary"
Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<Features>
<ext:GroupingSummary
ID="groupMasterScheduleDetail"
runat="server"
GroupHeaderTplString='<span style="color:white">{name} ({[values.rows.length]} {[values.rows.length > 1 ? "Employees" : "Employee"]})</span>'
HideGroupedHeader="true"
EnableGroupingMenu="true"
StartCollapsed="false">
</ext:GroupingSummary>
</Features>
<BottomBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:NumberField ID="NumberField1"
runat="server"
LabelWidth="70"
FieldLabel="Jump to row"
MinValue="1"
MaxValue="5000"
AllowDecimals="false"
EnableKeyEvents="true"
ItemId="gotoLine">
<Listeners>
<SpecialKey Handler="if (e.getKey() === e.ENTER) { jumpToRow.call(this); }" />
</Listeners>
</ext:NumberField>
<ext:Button ID="Button1" runat="server" Text="Go">
<Listeners>
<Click Fn="jumpToRow" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by fabricio.murta; May 26, 2017 at 7:55 AM.
