Feb 10, 2015, 11:29 AM
[CLOSED] Plugin BufferRendered: LoadMask and Delayed load
I have a tab panel that holds two grid panels. I would like to load the store when their tab is activated, but only for the first time. Thus when the tab is activated the first time the store load occurs, but any future tab clicks the data is not reloaded. Next I would like a load mask to be applied when loading.
The first grid, Store (Buffered, PageSize), looks to be working fine. I perform the following when the GridPanel is activated:
The first grid, Store (Buffered, PageSize), looks to be working fine. I perform the following when the GridPanel is activated:
<Listeners>
<Activate Handler="if (this.getStore().getCount() == 0) this.getStore().load();" />
</Listeners>
<View>
<ext:GridView runat="server" TrackOver="false" LoadMask="true" LoadingText="Loading Store (Buffered, PageSize)" />
</View><Listeners>
<Activate Handler="debugger;if (this.getStore().getCount() == 0) this.getStore().reload();" />
</Listeners><View>
<ext:GridView runat="server" TrackOver="false" LoadMask="true" LoadingText="Store (Buffered Plugin)" />
</View><%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
{
Store store = (Store)sender;
List<StockQuotation> data = new List<StockQuotation>();
int start = e.Start,
limit = e.Limit;
Random randow = new Random();
DateTime now = DateTime.Now;
for (int i = start + 1; i <= start + limit; i++)
{
StockQuotation qoute = new StockQuotation()
{
Company = "Company " + i,
Price = randow.Next(0, 200),
LastUpdate = now
};
data.Add(qoute);
}
store.Data = data;
e.Total = 50000;
}
class StockQuotation
{
public string Company { get; set; }
public int Price { get; set; }
public DateTime LastUpdate { get; set; }
}
protected void Buffered_ReadData(object sender, StoreReadDataEventArgs e)
{
int count = 50000;
Store store = (Store)sender;
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 { id = id, name = name, rating = rating, salary = salary };
}
store.DataSource = data;
store.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Infinite Scrolling - Ext.NET Examples</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TabPanel runat="server" Height="400">
<Items>
<ext:Panel runat="server" Title="No op" />
<ext:GridPanel
runat="server"
DisableSelection="true"
Title="Store (Buffered, PageSize)">
<Store>
<ext:Store
runat="server"
Buffered="true"
PageSize="200"
TrailingBufferZone="10"
LeadingBufferZone="10"
OnReadData="Store_ReadData"
AutoLoad="false">
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:PageProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Company" />
<ext:ModelField Name="Price" />
<ext:ModelField Name="LastUpdate" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn
runat="server"
Width="50" />
<ext:Column
runat="server"
Text="Company"
DataIndex="Company"
Flex="1" />
<ext:Column
runat="server"
Text="Price, $"
DataIndex="Price"
Width="70"
Align="Center" />
<ext:Column
runat="server"
Text="Last Update"
DataIndex="LastUpdate"
Width="140">
<Renderer Format="Date" FormatArgs="'n/j/Y g:i:s A'" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" TrackOver="false" LoadMask="true" LoadingText="Loading Store (Buffered, PageSize)" />
</View>
<Listeners>
<Activate Handler="if (this.getStore().getCount() == 0) this.getStore().load();" />
</Listeners>
</ext:GridPanel>
<ext:GridPanel
runat="server"
DisableSelection="true"
Title="Store (Buffered Plugin)">
<Store>
<ext:Store
runat="server"
OnReadData="Buffered_ReadData">
<Model>
<ext:Model runat="server">
<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 runat="server" />
</Plugins>
<View>
<ext:GridView runat="server" TrackOver="false" LoadMask="true" LoadingText="Store (Buffered Plugin)" />
</View>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" />
</SelectionModel>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn
runat="server"
Width="40"
Sortable="false" />
<ext:Column
runat="server"
Text="Name"
Flex="1"
DataIndex="name" />
<ext:Column
runat="server"
Text="Rating"
Width="125"
DataIndex="rating" />
<ext:Column
runat="server"
Text="Salary"
Width="125"
DataIndex="salary"
Align="Right">
<Renderer Format="UsMoney" />
</ext:Column>
</Columns>
</ColumnModel>
<Listeners>
<Activate Handler="debugger;if (this.getStore().getCount() == 0) this.getStore().reload();" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:TabPanel>
</form>
</body>
</html>
Last edited by Daniil; Feb 11, 2015 at 2:33 PM.
Reason: [CLOSED]
