PDA

View Full Version : [CLOSED] Plugin BufferRendered: LoadMask and Delayed load



cwolcott
Feb 10, 2015, 11:29 AM
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:


<Listeners>
<Activate Handler="if (this.getStore().getCount() == 0) this.getStore().load();" />
</Listeners>

and the loading mask is defined here:


<View>
<ext:GridView runat="server" TrackOver="false" LoadMask="true" LoadingText="Loading Store (Buffered, PageSize)" />
</View>


But in the second grid, Store (Buffered Plugin), I am having issues. The load() call does not work, I had to use reload()


<Listeners>
<Activate Handler="debugger;if (this.getStore().getCount() == 0) this.getStore().reload();" />
</Listeners>

and the loading mask is not showing:

<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>

Daniil
Feb 10, 2015, 7:18 PM
Hi Chris,

A GridView's LoadMask is true by default, but it only works if a Store has a remote Proxy.

For your test case I can suggest the following solution.

1. Change the Store's configuration to:

<ext:Store
runat="server"
OnReadData="Buffered_ReadData"
AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<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>

2. Change the Activate listener to:

<Activate Handler="if (this.getStore().getCount() == 0) this.getStore().load();" />

As an improvement, I would probably replace the Activate listeners to:

<Activate Handler="this.getStore().load();" Single="true" />

cwolcott
Feb 11, 2015, 2:23 PM
Thank you Daniil. Please close the thread.
Playing with new controls for a third Ext.NET application.