Extjs 4.1 Paging bar (Ext.toolbar.Paging) overflow issue

Question

I am using Ext.toolbar.Paging for a grid panel. When resizing the panel the overflow menu appears on the paging bar. But total count is not displayed correctly. Please check my paging bar.

pageSizingCombo is a defined object using a combobox for change paging size:

 Ext.create('Ext.toolbar.Paging',{
                store:store,
                dock : 'bottom',
                itemId:'paging-bar-view-panel',
                displayMsg: '{0} - {1} of {2}',
                items:{
                    xtype : 'pageSizingCombo',
                    pageSizes : [10,20,25,50,75,100],
                    width : 50
                },
                displayInfo: true,
                enableOverflow: true
            })

Paging bar without overflow menu.

enter image description here

Paging bar with overflow menu

when overflowing total count is incorrect it is displayed as "no record found"

It's showing "no records found". Is there are any solution for this issue.

darshanags darshanags · Accepted Answer · 2013-01-22T12:09:37

From what I could dig up the problem lies with the tbtext component added to the paging toolbar found here: http://docs.sencha.com/ext-js/4-1/source/Paging.html#Ext-toolbar-Paging-method-initComponent. To get around this you could turn off the displayInfo setting to false by:

displayInfo: false

and then adjusting your item config as:

items:[{ 
         xtype : 'pageSizingCombo',
         pageSizes : [10,20,25,50,75,100],
         width : 50
       },
       '->',
       {
         xtype: 'text', 
         itemId: 'displayItem'
      }]

Note that this will not work if you change the value for the itemId for the text component. In other words it always has to be 'displayItem'.

Extjs 4.1 Paging bar (Ext.toolbar.Paging) overflow issue

1 Answers