[CLOSED] PagingToolBar - hide - "Page 1 of 2" part?

  1. #1

    [CLOSED] PagingToolBar - hide - "Page 1 of 2" part?

    Hi Community !

    Please check the code sample below:

    
    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Xml" %>
    
    <script runat="server">
        private object[] TestData
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData;
            }
        }
    
        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <h1>The sample demonstrates local paging in the GridPanel</h1>
    
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                Title="Array Grid"
                Width="850"
                Height="520">
                <Store>
                    <ext:Store
                        ID="Store1"
                        runat="server"
                        PageSize="10">
                        <Model>
                            <ext:Model ID="Model1" runat="server" IDProperty="company">
                                <Fields>
                                    <ext:ModelField Name="company" />
                                    <ext:ModelField Name="price" Type="Float" />
                                    <ext:ModelField Name="change" Type="Float" />
                                    <ext:ModelField Name="pctChange" Type="Float" />
                                    <ext:ModelField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                            <Editor>
                                <ext:TextField ID="TextField2" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change" />
                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange" />
                        <ext:DateColumn ID="DateColumn1"
                            runat="server"
                            Text="Last Updated"
                            Width="120"
                            DataIndex="lastChange"
                            Format="HH:mm:ss" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server" />
                </Plugins>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" 
                        DisplayInfo="true"
                        DisplayMsg="{0} - {1} de {2}"
                        HideRefresh="true" 
                        EmptyMsg="No hay registros a desplegar">
                    <Listeners>
                        <BeforeRender Handler="this.getComponent('last').hidden = true;
                            this.getComponent('first').hidden = true;
                            this.getComponent('prev').hidden = true;
                            this.getComponent('next').hidden = true;" />
                    </Listeners>
                </ext:PagingToolbar>
                </BottomBar>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    Is there a way - in the PagingToolBar - to only show the next/prev buttons and not the
    Page 1 of 2 part of it?

    I found the following information:

    https://forums.ext.net/showthread.ph...ge-1-of-2-part

    https://forums.ext.net/showthread.ph...-pagingtoolbar

    Thanks in advance!
    Last edited by fabricio.murta; May 25, 2018 at 8:36 PM.
  2. #2
    Hello @opendat2000!

    Maybe the best way to wipe out the toolbar off controls would be to not add them at all, or just add them hidden. For that you can just override the method that fills up the controls within the pager: http://docs.sencha.com/extjs/6.5.2/c...s.html#line280

    Then you could, perhaps change the said method like this:

    Ext.define('Ext.toolbar.Paging', {
        override: 'Ext.toolbar.Paging',
        getPagingItems: function() {
            var me = this,
                inputListeners = {
                    scope: me,
                    blur: me.onPagingBlur
                };
            inputListeners[Ext.supports.SpecialKeyDownRepeat ? 'keydown' : 'keypress'] = me.onPagingKeyDown;
            return [
                {
                    itemId: 'first',
                    tooltip: me.firstText,
                    overflowText: me.firstText,
                    iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
                    disabled: true,
                    handler: me.moveFirst,
                    scope: me
                },
                {
                    itemId: 'prev',
                    tooltip: me.prevText,
                    overflowText: me.prevText,
                    iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
                    disabled: true,
                    handler: me.movePrevious,
                    scope: me
                },
                //'-',
                //me.beforePageText,
                {
                    xtype: 'numberfield',
                    itemId: 'inputItem',
                    name: 'inputItem',
                    cls: Ext.baseCSSPrefix + 'tbar-page-number',
                    allowDecimals: false,
                    minValue: 1,
                    hideTrigger: true,
                    hidden: true,
                    enableKeyEvents: true,
                    keyNavEnabled: false,
                    selectOnFocus: true,
                    submitValue: false,
    
                    isFormField: false,
                    width: me.inputItemWidth,
                    margin: '-1 2 3 2',
                    listeners: inputListeners
                },
                {
                    xtype: 'tbtext',
                    itemId: 'afterTextItem',
                    hidden: true,
                    html: Ext.String.format(me.afterPageText, 1)
                },
                //'-',
                {
                    itemId: 'next',
                    tooltip: me.nextText,
                    overflowText: me.nextText,
                    iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
                    disabled: true,
                    handler: me.moveNext,
                    scope: me
                },
                {
                    itemId: 'last',
                    tooltip: me.lastText,
                    overflowText: me.lastText,
                    iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
                    disabled: true,
                    handler: me.moveLast,
                    scope: me
                },
                //'-',
                {
                    itemId: 'refresh',
                    hidden: true,
                    tooltip: me.refreshText,
                    overflowText: me.refreshText,
                    iconCls: Ext.baseCSSPrefix + 'tbar-loading',
                    disabled: me.store.isLoading(),
                    handler: me.doRefresh,
                    scope: me
                }
            ];
        }
    })
    Then drop the listeners block you added to your pager. This way you'll be able to mangle the toolbar separators and texts easily, as they are not bound to any ID and would be harder to be touched after added to the component.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio

    Thanks for your quickly answer, you're providing a great support !

    Keep up the great work.

    Please close the thread.

    Saludos
    Mauricio
  4. #4
    Hello Mauricio!

    Thanks for the feedback, and glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Apr 06, 2016, 12:05 PM
  2. <%@ Page Language="C#" Buffer="false" %>
    By zanotto in forum 2.x Help
    Replies: 2
    Last Post: Nov 21, 2013, 4:32 PM
  3. Replies: 6
    Last Post: May 31, 2013, 3:04 AM
  4. Replies: 2
    Last Post: Jun 26, 2011, 1:59 AM
  5. PagingToolBar - hide - "Page 1 of 2" part?
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Jun 05, 2009, 1:56 AM

Posting Permissions