[CLOSED] ProgressBarPager on different ToolBar than PagingToolBar

Page 2 of 2 FirstFirst 12
  1. #11
    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; }
    
        }
    }
  2. #12
    Matt.Plugins.ProgressBarPager is a good approach, better than mine. Sorry, but i did not have enough time to find a better solution :)
Page 2 of 2 FirstFirst 12

Similar Threads

  1. [CLOSED] [#607] Bouncing ProgressBarPager plugin
    By matt in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 11, 2014, 9:30 AM
  2. Replies: 0
    Last Post: Nov 24, 2012, 10:45 PM
  3. Replies: 1
    Last Post: Mar 07, 2011, 9:39 AM
  4. [CLOSED] Pagingtoolbar text overlaps in toolbar
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 12, 2010, 8:37 AM
  5. Replies: 0
    Last Post: Feb 01, 2010, 5:44 AM

Tags for this Thread

Posting Permissions