PDA

View Full Version : [CLOSED] Infinite Scrolling with MVC



RCN
Apr 11, 2012, 7:17 PM
Hi folks, im trying to implement a Grid with infinite scrolling using mvc. I tried to do it using http://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Forum_topics/ as example but i was not able to accomplish this task

The function LoadRecords is called but the records are loaded in the grid.

Could someone give me directions to overcome this problem?

Thanks in advance

View


<ext:Panel ID="Panel1" runat="server" PreventHeader="true" Border="false">
<Loader ID="Loader1" runat="server" Mode="Component" AutoLoad="true" Url="/Example/Internal/">
<Params>
<ext:Parameter Name="containerId" Value="Panel1" Mode="Value" />
</Params>
<LoadMask ShowMask="true" />
</Loader>
</ext:Panel>


Interface Generator


public ContentResult Internal(string containerId)
{
//Grid
GridPanel grd = new GridPanel { ID = "_grd", Title = "example", Height = 200 };
grd.Listeners.AfterRender.Handler = "alert('Saldanha'); var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});";
grd.Listeners.AfterRender.Delay = 100;

//Proxy
JsonPProxy proxy = new JsonPProxy();
proxy.Reader.Add(new JsonReader { Root = "data", TotalProperty = "total" });
proxy.Url = "/Example/Test/";

//Store
Store str = new Store { ID = "_str", AutoLoad = false, Buffered = true };
str.Proxy.Add(proxy);
grd.Store.Add(str);

//Model
Model mdl = new Model { IDProperty = "ID" };
addColumn("ID", grd, mdl);
addColumn("Name", grd, mdl);
str.Model.Add(mdl);

//Result
ContentResult r = new ContentResult();

r.Content = ComponentLoader.ToJson(grd);

return r;
}

private void addColumn(string id, GridPanel grd, Model mdl)
{
ModelField mdf = new ModelField(id);

Column cln = new Column { ID = id, DataIndex = id, Sortable = true, Text = string.Format("_cln{0}", id) };

if (id == "ID")
{
mdl.IDProperty = id;
}

mdl.Fields.Add(mdf);

grd.ColumnModel.Columns.Add(cln);
}


Data Load


public StoreResult Test(int start, int limit)
{
List<Person> lst = new List<Person>();

for (int index = 0; index < limit; index++)
{
lst.Add(new Person { ID = index, Name = "Ext" + (start + index) });
}
return new StoreResult(lst, limit);
}


Entity


public class Person
{
public int ID { get; set; }

public string Name { get; set; }
}

RCN
Apr 11, 2012, 8:31 PM
It works if i use AjaxProxy istead of JsonPProxy.

The examples provided at examples.ext.net show the usage of JsonPProxy and PageProxy, but both do not work in my example.

In my post i use the JsonPProxy and as you can see it does not work. I also tried to use PageProxy but i get the following error "The control with ID '_str' not found". If i remove the ID of the store i get the following error:
4099

are these behaviours expected?

i would like to know whether there is some documentation about the proxy classes (AjaxProxy, DirectProxy, JsonPProxy, LocalStorageProxy, PageProxy, RestProxy, SessionStorageProxy) available in ext.net and when use each one of them.

geoffrey.mcgill
Apr 11, 2012, 8:39 PM
I think we have an ASP.NET MVC Razor sample demonstrating an Infinite Scrolling sample. I will find.

geoffrey.mcgill
Apr 11, 2012, 8:51 PM
We have two Razor samples demonstrating Infinite Scrolling. The first uses an AjaxProxy, the other a JsonPProxy. I'll post the JsonPProxy in the next forum post.

Example (View)


@{ Layout = "";
}


<!DOCTYPE html>
<html>
<head>
<title>Infinite Scrolling - Ext.NET Examples</title>


<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
@Html.X().ResourceManager()


<h1>Infinite Scrolling</h1>


<p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<br />


@(Html.X().GridPanel()
.Title("Stock Price")
.Height(500)
.Width(500)
.InvalidateScrollerOnRefresh(false)
.DisableSelection(true)
.Store(store => store.Add(Html.X().Store()
.PageSize(100)
.Buffered(true)
.AutoLoad(false)
.Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
.Url("/Data/GetData/")
.Reader(reader => reader.Add(Html.X().JsonReader()
.Root("data")
))
))
.Model(model => model.Add(Html.X().Model()
.Fields(fields => {
fields.Add(Html.X().ModelField().Name("Company"));
fields.Add(Html.X().ModelField().Name("Price"));
fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date));
})
))
))
.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
.ColumnModel(columnModel => {
columnModel.Columns.Add(Html.X().RowNumbererColumn ().Width(50).Sortable(false));
columnModel.Columns.Add(Html.X().Column()
.Text("Company")
.DataIndex("Company")
.Flex(1));
columnModel.Columns.Add(Html.X().Column()
.Text("Price")
.DataIndex("Price")
.Width(70));
columnModel.Columns.Add(Html.X().DateColumn()
.Text("LastUpdate")
.DataIndex("LastUpdate")
.Width(140)
.Format("HH:mm:ss"));
})
.View(view => view.Add(Html.X().GridView().TrackOver(false)))
.Listeners(listeners => {
listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
listeners.AfterRender.Delay = 100;
})
)
</body>
</html>

Example (Controller)


public class DataController : System.Web.Mvc.Controller{
public StoreResult GetData(int start, int limit, int page)
{
StoreResult response = new StoreResult();


List<StockQuotation> data = new List<StockQuotation>();


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);
}


response.Data = data;
response.Total = 50000;

return response;
}
}

geoffrey.mcgill
Apr 11, 2012, 8:53 PM
Here's the JsonPProxy sample of GridPanel with Infinite Scrolling. No 'data' Controller is required, because the data is loaded from a remote domain.

Example (View)


@{ Layout = "";
}


<!DOCTYPE html>
<html>
<head>
<title>Infinite Scrolling - Ext.NET Examples</title>


<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">
var renderTopic = function(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
};
</script>
</head>
<body>
@Html.X().ResourceManager()


<h1>Infinite Scrolling</h1>


<p>Ext.Net 2's brand new grid supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>

<p>The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>

<br />


@(Html.X().GridPanel()
.Title("ExtJS.com - Browse Forums")
.Height(500)
.Width(700)
.InvalidateScrollerOnRefresh(false)
.DisableSelection(true)
.Store(store => store.Add(Html.X().Store()
.RemoteSort(true)
.PageSize(200)
.Buffered(true)
.AutoLoad(false)
.Proxy(proxy => proxy.Add(Html.X().JsonPProxy()
.Url("http://www.sencha.com/forum/remote_topics/index.php")
.SimpleSortMode(true)
.Reader(r => r.Add(Html.X().JsonReader()
.Root("topics")
.TotalProperty("totalCount")
))
.ExtraParams(xparams => xparams.Add(Html.X().Parameter()
.Name("total")
.Value("100")
.Mode(ParameterMode.Raw)
))
))
.Model(model => model.Add(Html.X().Model()
.IDProperty("threadid")
.Fields(fields => {
fields.Add(Html.X().ModelField().Name("title"));
fields.Add(Html.X().ModelField().Name("forumtitle"));
fields.Add(Html.X().ModelField().Name("forumid"));
fields.Add(Html.X().ModelField().Name("author"));
fields.Add(Html.X().ModelField().Name("replycount").Type(ModelFieldType.Int));
fields.Add(Html.X().ModelField().Name("lastpost").Type(ModelFieldType.Date).DateFormat("timestamp"));
fields.Add(Html.X().ModelField().Name("lastposter"));
fields.Add(Html.X().ModelField().Name("excerpt"));
fields.Add(Html.X().ModelField().Name("threadid"));
})
))
.Sorters(sort => sort.Add(Html.X().DataSorter().Property("lastpost").Direction(Ext.Net.SortDirection.DESC)))
))
.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))
.ColumnModel(colModel => {
colModel.Columns.Add(Html.X().RowNumbererColumn(). Width(50).Sortable(false));
colModel.Columns.Add(Html.X().Column()
.ID("topic")
.Text("topic")
.DataIndex("title")
.Flex(1)
.Sortable(false)
.Renderer(new Renderer { Fn = "renderTopic" })
);
colModel.Columns.Add(Html.X().Column()
.Text("Author")
.DataIndex("author")
.Width(100)
.Hidden(true)
.Sortable(true)
);
colModel.Columns.Add(Html.X().Column()
.Text("Replies")
.DataIndex("replycount")
.Width(70)
.Align(Alignment.Center)
.Sortable(false)
);
colModel.Columns.Add(Html.X().DateColumn()
.Text("Last Post")
.DataIndex("lastpost")
.Width(130)
.Sortable(true)
.Format("HH:mm:ss")
);
})
.View(view => view.Add(Html.X().GridView().TrackOver(false)))
.Listeners(listeners => {
listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 199);";
listeners.AfterRender.Delay = 100; })
)
</body>
</html>

Daniil
Apr 11, 2012, 8:59 PM
i would like to know whether there is some documentation about the proxy classes (AjaxProxy, DirectProxy, JsonPProxy, LocalStorageProxy, PageProxy, RestProxy, SessionStorageProxy) available in ext.net and when use each one of them.

All apart from PageProxy you can find in ExtJS docs. For example,
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Ajax


PageProxy

Briefly, it can be used with code behind only.

Here are more details about PageProxy.
http://forums.ext.net/showthread.php?16561&p=70797&viewfull=1#post70797

It's Ext.NET v1 description, but there is the same in Ext.NET v2 apart from:

1. OnRefreshData has been renamed to OnReadData.

2. StoreRefreshDataEventArgs has been renamed to StoreReadDataEventArgs.

RCN
Apr 12, 2012, 1:11 PM
Hi folks, i would like to thank you for helping me to accomplish this task. Unfortunately, ive not got yet.

I have not mentioned but im implementing using version 2 beta of Ext.Net.

The frist example provided by Geoffrey does not work in the second version of Ext.Net. To make it work PARTIALLY i have to do the following:


use
var me = this; me.store.prefetch({start: 0, limit: 99, callback: function() { me.store.guaranteeRange(0, 49); }});instead of
this.store.guaranteeRange(0, 99);
Remove the parameter "page" from the method "/Data/GetData/"


But these changes break the pagination when i perform a large scroll. For saying the truth i dont know whether it was due the changes or a problem in the component itself

About Daniils post, unfortunately it does not fit my needs because im implementing an MVC application.

I just would like to know a way to implement this functionality in a mvc app using ext.net 2.0.

Daniil
Apr 12, 2012, 1:21 PM
I've just checked it up the first Geoffrey's example with the latest Ext.NET sources - works as expected.

So, you should update from SVN or wait the next release.

RCN
Apr 12, 2012, 1:35 PM
Does it work on version 2? ill try to update from svn

Daniil
Apr 12, 2012, 1:36 PM
Yes, with the last sources from SVN.

RCN
Apr 12, 2012, 1:36 PM
I provided an example in the first post of this thread. I mentioned that it does not work ("The control with ID '_str' not found") when i use PageProxy. After investigating better i think that i found a bug in ComponentLoader.ToJason:

{
store: {
model: Ext.define(Ext.id(), {
extend: "Ext.data.Model",
fields: [{
name: "ID"
}, {
name: "Name"
}],
idProperty: "ID"
}),
storeId: "_str",
proxy: {
type: "page",
reader: {
type: "json",
root: "data",
totalProperty: "total"
},
url: "/Example/Test/"
},
buffered: true
},
id: "_grd",
height: 200,
xtype: "grid",
title: "example",
columns: {
items: [{
id: "ID",
dataIndex: "ID",
text: "_clnID"
}, {
id: "Name",
dataIndex: "Name",
text: "_clnName"
}]
},
viewConfig: {
xtype: "gridview",
trackOver: false
},
listeners: {
afterrender: {
delay: 100,
fn: function (item) {
var me = this;
me.store.prefetch({
start: 0,
limit: 0
});
}
}
}
}

in the code above the storeId is the defined as "_str" but ComponentLoader did not set the id of the store.

Daniil
Apr 12, 2012, 1:42 PM
There is

storeId: "_str"
in the script you posted. It's the ID that you set up.

There is another problem. The Exception you mentioned means that a Store instance cannot be found on server side. And, really, there is no Store instance on server side, because you render it within a controller action.

Generally, PageProxy should not be used with MVC at all.

RCN
Apr 12, 2012, 2:05 PM
Ive just updated from svn and it still does not work.

im running the example with the following dlls references

Ext.Net 2.0.4449.39235
Ext.Net.Utilities 2.0.0.189
Newtonsoft.Json 4.0.8.0
Transformer.NET 2.0.0.3590

any suggestion?

Daniil
Apr 12, 2012, 2:06 PM
You should update Ext.NET from:
http://svn.ext.net/premium/branches/2.0/Ext.Net/

RCN
Apr 12, 2012, 6:27 PM
thank you .. please mark it as solved