View Full Version : Not getting correct afterPageText for paging toolbar after overriding it

8 Jan 2015, 2:23 AM
I am trying to hide first, previous, next, last and refresh button for paging toolbar in EXT JS 4.1.0. I did this with the help of following code, but this code is not able to fetch correct afterPageText value. I m adding two items in the existing toolbar. I am trying this thing in xCP Designer 2.0

Ext.define('Override.toolbar.Paging', {
override: 'Ext.toolbar.Paging',

hideFirstButton: false,
hidePrevButton: false,
hideBeforePageText: false,
hidePageNumberField: false,
hideAfterPageText: false,
hideNextButton: false,
hideLastButton: false,
hideRefreshButton: false,

getPagingItems: function() {
var me = this;

return [{
itemId: 'first',
tooltip: me.firstText,
overflowText: me.firstText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
hidden: me.hideFirstButton,
disabled: true,
handler: me.moveFirst,
scope: me
}, {
itemId: 'prev',
tooltip: me.prevText,
overflowText: me.prevText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
hidden: me.hidePrevButton,
disabled: true,
handler: me.movePrevious,
scope: me
}, {
xtype: 'tbseparator',
hidden: me.hideFirstButton && me.hidePrevButton
}, {
xtype: 'tbtext',
text: me.beforePageText,
hidden: me.hideBeforePageText
}, {
xtype: 'numberfield',
itemId: 'inputItem',
name: 'inputItem',
hidden: me.hidePageNumberField,
cls: Ext.baseCSSPrefix + 'tbar-page-number',
allowDecimals: false,
minValue: 1,
hideTrigger: true,
enableKeyEvents: true,
keyNavEnabled: false,
selectOnFocus: true,
submitValue: false,
// mark it as not a field so the form will not catch it when getting fields
isFormField: false,
width: me.inputItemWidth,
margins: '-1 2 3 2',
listeners: {
scope: me,
keydown: me.onPagingKeyDown,
blur: me.onPagingBlur
}, {
xtype: 'tbtext',
itemId: 'afterTextItem',
hidden: me.hideAfterPageText,
text: Ext.String.format(me.afterPageText, 1)
}, {
xtype: 'tbseparator',
hidden: me.hideNextButton && me.hideLastButton
}, {
itemId: 'next',
tooltip: me.nextText,
overflowText: me.nextText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
hidden: me.hideNextButton,
disabled: true,
handler: me.moveNext,
scope: me
}, {
itemId: 'last',
tooltip: me.lastText,
overflowText: me.lastText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
hidden: me.hideLastButton,
disabled: true,
handler: me.moveLast,
scope: me
}, {
xtype: 'tbseparator',
hidden: me.hideRefreshButton
}, {
itemId: 'refresh',
hidden: me.hideRefreshButton,
tooltip: me.refreshText,
overflowText: me.refreshText,
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
handler: me.doRefresh,
scope: me
initComponent: function () {
var me = this;
this.dockedItems = [
xtype: 'toolbar',
//store: me.store,
dock: 'bottom',
height: '45px',
items: [
//'->',//right alight the button
xtype: 'xcp_pagingtoolbar',
store: me.store,
//flex: true,
dock: 'bottom',
displayInfo: true
xtype: 'pagingtoolbar',
store: me.store,
displayInfo: false,
hideRefreshButton: true,
hideFirstButton: true,
hideLastButton: true,
hidePrevButton: true,
hideNextButton: true,
//disabled: true


Plz help in fetching the correct afterPageText value.


12 Jan 2015, 1:29 PM
I'd like to test this along with you. Can you post a simple test case either inline here or at https://fiddle.sencha.com?