PDA

View Full Version : [CLOSED] Use StoreRequestParameters along with another parameter/option



jpadgett
Mar 01, 2013, 5:56 PM
I am building on this post: http://forums.ext.net/showthread.php?23719-CLOSED-Load-store-using-parameter-to-filter-data

Here is a sample View and Action (with Model in the Action).

DataView.cshtml:


@{
ViewBag.Title = "DataView";
}

<style>
.west-list {
padding: 0 3px 0 3px;
}

.west-list-item {
margin-top: 3px;
padding-left: 20px;
font-size: 11px;
line-height: 20px;
cursor: pointer;
background: url(../images/bullet.png) no-repeat 0 2px;
border: 1px solid #fff;
}

.west-list .x-item-selected {
font-weight: bold;
color: #15428B;
background-color: #DFE8F6;
border: 1px dotted #A3BAE9;
}

.west-list-item-hover {
background-color: #eee;
}
</style>

<script>
Ext.ns("MainTab");
MainTab.WestPanel = {
getPanel: function () {
var me = MainTab.WestPanel;
if (!me._panel) {
me._panel = Ext.ComponentQuery.query("[id=SeasonDataView]")[0];
}
return me._panel;
},

getSelectedItem: function () {
var me = MainTab.WestPanel;
return me.getPanel().getSelectionModel().getSelection()[0] || false;
},

onSelectionChange: function () {
var me = MainTab.WestPanel,
selected = me.getSelectedItem();

reloadStores(selected.get("id"));
}
}

var reloadStores = function (id) {
App.TestStore.reload({ params: { testid: id } });
}
</script>

@(Html.X().Viewport()
.Border(false)
.Layout(LayoutType.Border)
.Items(
Html.X().Panel()
.Region(Region.West)
.Layout(LayoutType.Fit)
.Width(150)
.Title("Season")
.Cls("west-panel")
.Items(
Html.X().DataView()
.ID("SeasonDataView")
.SingleSelect(true)
.TrackOver(true)
.Cls("west-list")
.ItemSelector(".west-list-item")
.OverItemCls("west-list-item-hover")
.Store(Html.X().Store()
.ID("SeasonStore")
.AutoLoad(true)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("result")
)
)
.Listeners(l =>
{
l.Load.Handler = "#{SeasonDataView}.getSelectionModel().select(this. first());";
})
.Model(
Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("year")
)
)
)
.Tpl(
Html.X().XTemplate()
.Html(
@<tpl for=".">
<div class="west-list-item">
{year}
</div>
</tpl>
)
)
.Listeners(l =>
{
l.SelectionChange.Fn = "MainTab.WestPanel.onSelectionChange";
})
),

Html.X().GridPanel()
.Title("test")
.Width(400)
.Store(
Html.X().Store()
.ID("TestStore")
.AutoLoad(false)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetTestData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("data")
)
)
.Model(
Html.X().Model()
.Fields(
new ModelField("name"),
new ModelField("rank", ModelFieldType.Int)
)
)
)
.ColumnModel(
Html.X().Column().Text("Name").DataIndex("name").Flex(1),
Html.X().Column().Text("Rank").DataIndex("rank")
)
.BottomBar(
Html.X().PagingToolbar()
.ID("TestPager")
.BeforePageText("Game")
)
)
)


Controller:


public ActionResult DataView()
{
return View();
}

[HttpPost]
public ActionResult GetData()
{
List<object> data = new List<object>
{
new {id = 10, year = "2001"},
new {id = 11, year = "2002"},
new {id = 12, year = "2003"},
new {id = 13, year = "2004"},
new {id = 14, year = "2005"}
};

return new DirectResult(data);
}

[HttpPost]
public ActionResult GetTestData(int testid, StoreRequestParameters parameters)
{
List<TestData> results = TestDataList.Where(t => t.yearid == testid).ToList();

int start = parameters.Start;
int limit = parameters.Limit;
if ((start + limit) > results.Count)
{
limit = results.Count - start;
}

List<TestData> rangeResults = (start < 0 || limit < 0) ? results : results.GetRange(start, limit);

return new StoreResult
{
Data = new Paging<TestData>(rangeResults, results.Count).Data,
Total = results.Count
};
}

private List<TestData> TestDataList
{
get
{
List<TestData> l = new List<TestData>();

for (int x = 10; x <= 14; x++)
{
for (int y = 1; y <= (x*3); y++)
{
l.Add(new TestData { yearid = x, name = "Person " + y.ToString(), rank = y, pagesize = x });
}
}

return l ;
}
}

public class TestData
{
public int yearid { get; set; }
public string name { get; set; }
public int rank { get; set; }
public int pagesize { get; set; }
}


The data in the grid will populate based on the selected item in the dataview. But the paging toolbar will NOT work (throws error: The parameters dictionary contains a null entry for parameter 'testid' of non-nullable type).

Here is what I have working:

When the page loads, the first item in the dataview is selected
The SelectionChange event fires and loads the grid based on the id value of the selected item


Functionality that I need:

When the grid loads, it moves to the LAST page
The grid page size is based on the "gridsize" property of the TestData model object
The pager toolbar is able to pass the "id" value of the selected dataview item when it gets the next/previous page data


I tried setting the page size in the ActionResult, but it does not take:


[HttpPost]
public ActionResult GetTestData(int testid, StoreRequestParameters parameters)
{
List<TestData> results = TestDataList.Where(t => t.yearid == testid).ToList();

X.GetCmp<Store>("TestStore").PageSize = results.First().pagesize;


I changed the page limit value, and that creates the correct page size, but the paging toolbar does not show the correct "Displaying 1 of n":


[HttpPost]
public ActionResult GetTestData(int testid, StoreRequestParameters parameters)
{
List<TestData> results = TestDataList.Where(t => t.yearid == testid).ToList();

int start = parameters.Start;
int limit = results.First().pagesize;


I can get the grid to move to the last page using the below code:


var moveToLastPage = function (store) {
var id = MainTab.WestPanel.getSelectedItem().get("id");
store.loadPage(Math.ceil(store.totalCount / store.pageSize), { params: { testid: id } });
}

and adding this listener to the grid store:


.Listeners(l =>
{
l.Load.Handler = "moveToLastPage(this);";
l.Load.Single = true;
})


HOWEVER - the Load.Single has to be there to prevent the grid from loading infinitely, so this only works the first time the dataview selection changes. It will APPEAR to be working if you change the selection - but only because the pager is already moved to the last page. If you click previous on the pager, then close the error box, then change the selection of the dataview, you will see that the grid is loading the first page afterwards.

I tried figuring out how to add the listener via javascript, then removing it. I came up with the code below - but it throws an error:


var reloadStores = function (id) {
App.TestStore.on({
load: { handler: moveToLastPage(App.TestStore) }
});

App.TestStore.reload({ params: { testid: id } });
}

var moveToLastPage = function (store) {
var id = MainTab.WestPanel.getSelectedItem().get("id");
store.loadPage(Math.ceil(store.totalCount / store.pageSize), { params: { testid: id } });

store.removeListener("load");
}


Sorry for the long post - but I didn't want to give the impression I wasn't trying before asking for help. :)

Vladimir
Mar 01, 2013, 9:09 PM
So, if I understood correctly then you need to pass 'testId' with every store request
I reccomend to save current testId in any global variable and read that variable from a parameter



.Parameters(p =>
{
p.Add(new StoreParameter("testId", "window.testId || 0", ParameterMode.Raw));
})


So, before reload you just need to update that global variable


window.testId = 1;


P.S. Sorry if I misunderstood something in your post

jpadgett
Mar 01, 2013, 10:04 PM
Vladimir - that's awesome. It resolves #3 of my "Functionality that I need" list - and simplified my code.

The pager at least WORKS now with your suggestion.

Can you help me figure out the other paging issues (#1 and #2)? I need to move to the last record whenever the store reloads, and I need to set the page size. Notice in my example I created data sets that have a different number of overall records in them with a page size that should create 3 pages per yearid.

Baidaly
Mar 02, 2013, 1:44 AM
Hello!


When the grid loads, it moves to the LAST page

You can add own parameter and send last page flag, when you receive it you can send from server the last page:


App.TestStore.reload({ params: { testid: id, lastPage: true } });

And don't forget to make this flag nullable:


public ActionResult GetTestData(StoreRequestParameters parameters, int? testid = 10, bool? lastPage = false)


The grid page size is based on the "gridsize" property of the TestData model obje

You can try the following:



var reloadStores = function (id) {
App.TestStore.reload({ params: { testid: 10, lastPage: true, limit: 10 }, callback: function(records, operation, success) {
App.TestStore.pageSize = records[0].data.pagesize;
App.TestPager.updateInfo();
} });
}

Ext.override(Ext.toolbar.Paging, {
updateInfo : function () {
var me = this,
displayItem = me.child('#displayItem'),
afterTextItem = me.child('#afterTextItem'),
pageData = me.getPageData(),
msg, afterMsg;
if (displayItem) {
if (pageData.pageCount === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total);

afterMsg = Ext.String.format(
me.afterPageText,
pageData.pageCount
);
}
displayItem.setText(msg);
}
}
});


Overriding required to fix afterTextMsg value

jpadgett
Mar 02, 2013, 10:05 PM
Baidaly - great stuff!! I am trying to implement your change, but something odd is happening. The records in the callback have the yearid and pagesize as 'undefined', which is causing the updateInfo to fail. Any idea why this would be happening? Here is the view as I have it now - I put two alerts in to show the operation response and then the records[0].data fields:



@{
ViewBag.Title = "DataView";
}

<style>
.west-list {
padding: 0 3px 0 3px;
}

.west-list-item {
margin-top: 3px;
padding-left: 20px;
font-size: 11px;
line-height: 20px;
cursor: pointer;
background: url(../images/bullet.png) no-repeat 0 2px;
border: 1px solid #fff;
}

.west-list .x-item-selected {
font-weight: bold;
color: #15428B;
background-color: #DFE8F6;
border: 1px dotted #A3BAE9;
}

.west-list-item-hover {
background-color: #eee;
}
</style>

<script>
Ext.ns("MainTab");
MainTab.WestPanel = {
getPanel: function () {
var me = MainTab.WestPanel;
if (!me._panel) {
me._panel = Ext.ComponentQuery.query("[id=SeasonDataView]")[0];
}
return me._panel;
},

getSelectedItem: function () {
var me = MainTab.WestPanel;
return me.getPanel().getSelectionModel().getSelection()[0] || false;
},

onSelectionChange: function () {
var me = MainTab.WestPanel,
selected = me.getSelectedItem();

reloadStores(selected.get("id"));
}
}

Ext.override(Ext.toolbar.Paging, {
updateInfo : function () {
var me = this,
displayItem = me.child('#displayItem'),
afterTextItem = me.child('#afterTextItem'),
pageData = me.getPageData(),
msg, afterMsg;
if (displayItem) {
if (pageData.pageCount === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total);

afterMsg = Ext.String.format(
me.afterPageText,
pageData.pageCount
);
}
displayItem.setText(msg);
}
}
});

var reloadStores = function (id) {
window.testId = id;
App.TestStore.reload({
params: {
lastPage: true,
limit: 10
},
callback: function (records, operation, success) {
alert(success + " - " + operation.response.responseText);
alert(records[0].data.yearid + " " + records[0].data.name + " " + records[0].data.rank + " " + records[0].data.pagesize);
App.TestStore.pageSize = records[0].data.pagesize;
App.TestPager.updateInfo();
}
});
}
</script>

@(Html.X().Viewport()
.Border(false)
.Layout(LayoutType.Border)
.Items(
Html.X().Panel()
.Region(Region.West)
.Layout(LayoutType.Fit)
.Width(150)
.Title("Season")
.Cls("west-panel")
.Items(
Html.X().DataView()
.ID("SeasonDataView")
.SingleSelect(true)
.TrackOver(true)
.Cls("west-list")
.ItemSelector(".west-list-item")
.OverItemCls("west-list-item-hover")
.Store(Html.X().Store()
.ID("SeasonStore")
.AutoLoad(true)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("result")
)
)
.Listeners(l =>
{
l.Load.Handler = "#{SeasonDataView}.getSelectionModel().select(this. first());";
})
.Model(
Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("year")
)
)
)
.Tpl(
Html.X().XTemplate()
.Html(
@<tpl for=".">
<div class="west-list-item">
{year}
</div>
</tpl>
)
)
.Listeners(l =>
{
l.SelectionChange.Fn = "MainTab.WestPanel.onSelectionChange";
})
),

Html.X().GridPanel()
.Title("test")
.Width(400)
.Store(
Html.X().Store()
.ID("TestStore")
.AutoLoad(false)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetTestData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("data")
)
)
.Parameters(p =>
{
p.Add(new StoreParameter("testid", "window.testId || 0", ParameterMode.Raw));
})
.Model(
Html.X().Model()
.Fields(
new ModelField("name"),
new ModelField("rank", ModelFieldType.Int)
)
)
)
.ColumnModel(
Html.X().Column().Text("Name").DataIndex("name").Flex(1),
Html.X().Column().Text("Rank").DataIndex("rank")
)
.BottomBar(
Html.X().PagingToolbar()
.ID("TestPager")
.BeforePageText("Game")
)
)
)

Baidaly
Mar 04, 2013, 2:08 AM
You should add these fields in your model to use them:



.Model(
Html.X().Model()
.Fields(
new ModelField("name"),
new ModelField("rank", ModelFieldType.Int),
new ModelField("pagesize", ModelFieldType.Int),
new ModelField("yearid", ModelFieldType.Int)
)
)


Also, I there is a mistake in overring, please, use this one:



Ext.override(Ext.toolbar.Paging, {
updateInfo : function () {
var me = this,
displayItem = me.child('#displayItem'),
afterTextItem = me.child('#afterTextItem'),
pageData = me.getPageData(),
msg, afterMsg;
if (displayItem) {
if (pageData.pageCount === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total);
}
displayItem.setText(msg);
}

if (afterTextItem) {
afterMsg = Ext.String.format(
me.afterPageText,
pageData.pageCount
);

afterTextItem.setText(afterMsg);
}
}
});

jpadgett
Mar 04, 2013, 2:51 PM
Perfect! The page is working great now.

One note: the store param "lastPage: true" didn't seem to work, so I just added a moveLast() method call after updating the pager.



var reloadStores = function (id) {
window.testId = id;
App.TestStore.reload({
params: {
limit: 10
},
callback: function (records, operation, success) {
App.TestStore.pageSize = records[0].data.pagesize;
App.TestPager.updateInfo();
App.TestPager.moveLast();
}
});
}


Thanks, everyone, for all of your help!

Daniil
Mar 04, 2013, 6:43 PM
One note: the store param "lastPage: true" didn't seem to work, so I just added a moveLast() method call after updating the pager.


Please clarify what do you expect from this option? It is just a parameter to be sent to an action to return data for the last page.

I guess the PagingToolbar is not updated correctly, is it? I think a respective value of the start parameter is required to get the PagingToolbar updated correctly.

jpadgett
Mar 04, 2013, 9:53 PM
Hi Daniil,

The desired functionality was to have the grid move to the last page right after it was loaded with data. The "lastPage: true" parameter was an attempt to do that, but did not function in that way. Using the last line of "App.TestPager.moveLast();" did provide the desired effect, though.

Baidaly
Mar 04, 2013, 10:54 PM
Did you use nullable arguments in the action:


public ActionResult GetTestData(StoreRequestParameters parameters, int? testid = 10, bool? lastPage = false)

I think it's not good to make to consequently request to the server side.

Can you provide Controller and Updated view, I'll try to figure out where is the problem.

jpadgett
Mar 05, 2013, 4:07 PM
I implemented the lastPage param, and it will move the data to the last page, but the pager toolbar shows as page 1.

Here is the view - and I have commented out the App.TestPager.moveLast():


@{
ViewBag.Title = "DataView";
}

<style>
.west-list {
padding: 0 3px 0 3px;
}

.west-list-item {
margin-top: 3px;
padding-left: 20px;
font-size: 11px;
line-height: 20px;
cursor: pointer;
background: url(../images/bullet.png) no-repeat 0 2px;
border: 1px solid #fff;
}

.west-list .x-item-selected {
font-weight: bold;
color: #15428B;
background-color: #DFE8F6;
border: 1px dotted #A3BAE9;
}

.west-list-item-hover {
background-color: #eee;
}
</style>

<script>
Ext.ns("MainTab");
MainTab.WestPanel = {
getPanel: function () {
var me = MainTab.WestPanel;
if (!me._panel) {
me._panel = Ext.ComponentQuery.query("[id=SeasonDataView]")[0];
}
return me._panel;
},

getSelectedItem: function () {
var me = MainTab.WestPanel;
return me.getPanel().getSelectionModel().getSelection()[0] || false;
},

onSelectionChange: function () {
var me = MainTab.WestPanel,
selected = me.getSelectedItem();

reloadStores(selected.get("id"));
}
}

Ext.override(Ext.toolbar.Paging, {
updateInfo: function () {
var me = this,
displayItem = me.child('#displayItem'),
afterTextItem = me.child('#afterTextItem'),
pageData = me.getPageData(),
msg, afterMsg;
if (displayItem) {
if (pageData.pageCount === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total);
}
displayItem.setText(msg);
}

if (afterTextItem) {
afterMsg = Ext.String.format(
me.afterPageText,
pageData.pageCount
);

afterTextItem.setText(afterMsg);
}
}
});

var reloadStores = function (id) {
window.testId = id;
App.TestStore.reload({
params: {
lastPage: true,
limit: 10
},
callback: function (records, operation, success) {
App.TestStore.pageSize = records[0].data.pagesize;
App.TestPager.updateInfo();
//App.TestPager.moveLast();
}
});
}
</script>

@(Html.X().Viewport()
.Border(false)
.Layout(LayoutType.Border)
.Items(
Html.X().Panel()
.Region(Region.West)
.Layout(LayoutType.Fit)
.Width(150)
.Title("Season")
.Cls("west-panel")
.Items(
Html.X().DataView()
.ID("SeasonDataView")
.SingleSelect(true)
.TrackOver(true)
.Cls("west-list")
.ItemSelector(".west-list-item")
.OverItemCls("west-list-item-hover")
.Store(Html.X().Store()
.ID("SeasonStore")
.AutoLoad(true)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("result")
)
)
.Listeners(l =>
{
l.Load.Handler = "#{SeasonDataView}.getSelectionModel().select(this. first());";
})
.Model(
Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("year")
)
)
)
.Tpl(
Html.X().XTemplate()
.Html(
@<tpl for=".">
<div class="west-list-item">
{year}
</div>
</tpl>
)
)
.Listeners(l =>
{
l.SelectionChange.Fn = "MainTab.WestPanel.onSelectionChange";
})
),

Html.X().GridPanel()
.Title("test")
.Width(400)
.Store(
Html.X().Store()
.ID("TestStore")
.AutoLoad(false)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetTestData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("data")
)
)
.Parameters(p =>
{
p.Add(new StoreParameter("testid", "window.testId || 0", ParameterMode.Raw));
})
.Model(
Html.X().Model()
.Fields(
new ModelField("yearid", ModelFieldType.Int),
new ModelField("name"),
new ModelField("rank", ModelFieldType.Int),
new ModelField("pagesize", ModelFieldType.Int)
)
)
)
.ColumnModel(
Html.X().Column().Text("Name").DataIndex("name").Flex(1),
Html.X().Column().Text("Rank").DataIndex("rank")
)
.BottomBar(
Html.X().PagingToolbar()
.ID("TestPager")
.BeforePageText("Game")
)
)
)


And controller:


public ActionResult DataView()
{
return View();
}

[HttpPost]
public ActionResult GetTestData(int testid, bool? lastPage, StoreRequestParameters parameters)
{
List<TestData> results = TestDataList.Where(t => t.yearid == testid).ToList();

int limit = results.First().pagesize;
int start = (lastPage == true) ? results.Count - limit : parameters.Start;

List<TestData> rangeResults = (start < 0 || limit < 0) ? results : results.GetRange(start, limit);

return new StoreResult
{
Data = new Paging<TestData>(rangeResults, results.Count).Data,
Total = results.Count
};
}

private List<TestData> TestDataList
{
get
{
List<TestData> l = new List<TestData>();

for (int x = 10; x <= 14; x++)
{
for (int y = 1; y <= (x*3); y++)
{
l.Add(new TestData { yearid = x, name = "Person " + y.ToString(), rank = y, pagesize = x });
}
}

return l ;
}
}

public class TestData
{
public int yearid { get; set; }
public string name { get; set; }
public int rank { get; set; }
public int pagesize { get; set; }
}

Baidaly
Mar 05, 2013, 11:47 PM
OK, you have to update page number too:



Ext.override(Ext.toolbar.Paging, {
updateInfo: function () {
var me = this,
displayItem = me.child('#displayItem'),
afterTextItem = me.child('#afterTextItem'),
inputItem = me.child('#inputItem'),
pageData = me.getPageData(),
msg, afterMsg;
if (displayItem) {
if (pageData.pageCount === 0) {
msg = me.emptyMsg;
} else {
msg = Ext.String.format(
me.displayMsg,
pageData.fromRecord,
pageData.toRecord,
pageData.total);
}
displayItem.setText(msg);
}

if (afterTextItem) {
afterMsg = Ext.String.format(
me.afterPageText,
pageData.pageCount
);

afterTextItem.setText(afterMsg);
}

if (inputItem) {
inputItem.setValue(pageData.currentPage);
}
}
});

var reloadStores = function (id) {
window.testId = id;
App.TestStore.reload({
params: {
lastPage: true,
limit: 10
},
callback: function (records, operation, success) {
App.TestStore.pageSize = records[0].data.pagesize;
App.TestStore.currentPage = Math.ceil(App.TestStore.totalCount / App.TestStore.pageSize);
App.TestPager.updateInfo();
//App.TestPager.moveLast();
}
});
}

jpadgett
Mar 06, 2013, 3:25 AM
I added your change - it is very close, but the pager buttons (next, prev, etc) are in the state where the pager would be on the first page.

Baidaly
Mar 06, 2013, 4:47 AM
Yes, it seems that I missed them. You should disable the following child elements of PagingToolbar in updateInfo method: first, prev, next, last depending on pageData values

Daniil
Mar 06, 2013, 6:24 AM
Maybe, it is possible to avoid overriding the updateInfo method.

Please take a look at this example. The key point is within the load callback.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
public List<object> MyData = new List<object>
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" },
new { test = "test5" },
new { test = "test6" },
new { test = "test7" },
new { test = "test8" },
new { test = "test9" }
};

protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
{
bool lastPage = false;
int start = e.Start;
int limit = e.Limit;
List<object> data = this.MyData;

if (e.Parameters["lastPage"] != null)
{
lastPage = bool.Parse(e.Parameters["lastPage"]);
}

if (lastPage)
{
start = data.Count - limit;
}

if ((start + limit) > data.Count)
{
limit = data.Count - start;
}

List<object> rangeData = (start < 0 || limit < 0) ? data : data.GetRange(start, limit);
e.Total = data.Count;
(sender as Store).DataSource = rangeData;
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store
runat="server"
OnReadData="Store_ReadData"
PageSize="3"
AutoLoad="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" />
</BottomBar>
</ext:GridPanel>
<ext:Button runat="server" Text="Test">
<Listeners>
<Click Handler="App.GridPanel1.getStore().load({
params: {
limit: 3,
lastPage: true
},
callback: function (records, operation, success) {
operation.store.currentPage = App.PagingToolbar1.getPageData().pageCount;
App.PagingToolbar1.onLoad();
}
});" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

jpadgett
Mar 06, 2013, 3:47 PM
The pager.onLoad() worked great! Here is the final script - without using the override:



var reloadStores = function (id) {
window.testId = id;
App.TestStore.reload({
params: {
lastPage: true,
limit: 10
},
callback: function (records, operation, success) {
App.TestStore.pageSize = records[0].data.pagesize;
App.TestStore.currentPage = Math.ceil(App.TestStore.totalCount / App.TestStore.pageSize);
App.TestPager.onLoad();
}
});
}


Thank you both so much for all of your help!