Jan 12, 2015, 7:21 PM
Now it's possible to change the current page of the store by clicking on ProgressBarPager.
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
var AfterRender = function () {
App._pb.el.on({
click: HandleProgressBarClick,
scope: App._pb
});
}
var HandleProgressBarClick = function (e) {
var store = App._str;
var displayItem = this;
var box = displayItem.getBox();
var xy = e.getXY();
var position = xy[0] - box.x;
var pages = Math.ceil(store.getTotalCount() / store.pageSize);
var newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
store.loadPage(newPage);
}
var UpdateInfo = function () {
var store = App._str;
var pagingToolbar = App._ptb;
var progressBar = App._pb;
var count = store.getCount();
var pageData = pagingToolbar.getPageData();
var message = count === 0 ? pagingToolbar.emptyMsg : Ext.String.format(pagingToolbar.displayMsg, pageData.fromRecord, pageData.toRecord, store.getTotalCount());
var percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
progressBar.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:GridPanel runat="server" Title="Records" Frame="false" Width="500" Height="500">
<Store>
<ext:Store ID="_str" AutoLoad="true" PageSize="10" runat="server">
<Proxy>
<ext:AjaxProxy Url="~/Example/LoadFakeRecords/" StartParam="start" LimitParam="limit" PageParam="page" SortParam="sort">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" Type="String" />
<ext:ModelField Name="Name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarFill />
<ext:ProgressBar StyleSpec="cursor: pointer;" Animate="true" ID="_pb" Width="200" runat="server">
<Listeners>
<AfterRender Handler="AfterRender();" />
</Listeners>
</ext:ProgressBar>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="_ptb" DisplayInfo="false" runat="server">
<Listeners>
<Change Handler="UpdateInfo()" />
</Listeners>
</ext:PagingToolbar>
</BottomBar>
</ext:GridPanel>
</body>
</html>
namespace SandBox.Controllers
{
public class ExampleController : System.Web.Mvc.Controller
{
public ActionResult Index()
{
return View();
}
public StoreResult LoadFakeRecords(int start, int limit, int page, string sort)
{
List<Person> lst = new List<Person>();
for (int index = start; index < (page * limit); index++)
{
lst.Add(new Person
{
ID = index,
Name = string.Format("Name - {0}", index)
});
}
return new StoreResult(lst, 100);
}
}
[Serializable]
public class Person
{
public int ID { get; set; }
public string Name { get; set; }
}
}