Skip to content

Instantly share code, notes, and snippets.

@brihter
Created August 7, 2013 18:39
Show Gist options
  • Save brihter/6177089 to your computer and use it in GitHub Desktop.
Save brihter/6177089 to your computer and use it in GitHub Desktop.
A ExtJS paging toolbar component override to allow for showing/hiding the refresh button in the toolbar. Compatible with version Ext 4.2.1.
/**
* A paging toolbar override to allow for hiding the refresh button in the toolbar. Compatible with Ext 4.2.1.
*
* @class Ext.toolbar.Paging
* @override
* @author Bostjan Rihter <[email protected]>
*/
Ext.override(Ext.toolbar.Paging, {
/**
* @cfg {Boolean} enableRefresh
* Set true to display the refresh button in toolbar, false to hide it.
*/
enableRefresh: true,
onLoad: function () {
var me = this,
pageData,
currPage,
pageCount,
afterText,
count,
isEmpty,
item;
count = me.store.getCount();
isEmpty = count === 0;
if (!isEmpty) {
pageData = me.getPageData();
currPage = pageData.currentPage;
pageCount = pageData.pageCount;
afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
} else {
currPage = 0;
pageCount = 0;
afterText = Ext.String.format(me.afterPageText, 0);
}
Ext.suspendLayouts();
item = me.child('#afterTextItem');
if (item) {
item.setText(afterText);
}
item = me.getInputItem();
if (item) {
item.setDisabled(isEmpty).setValue(currPage);
}
me.setChildDisabled('#first', currPage === 1 || isEmpty);
me.setChildDisabled('#prev', currPage === 1 || isEmpty);
me.setChildDisabled('#next', currPage === pageCount || isEmpty);
me.setChildDisabled('#last', currPage === pageCount || isEmpty);
//#region override
if (me.enableRefresh) {
me.setChildDisabled('#refresh', false);
}
//#endregion
me.updateInfo();
Ext.resumeLayouts(true);
if (me.rendered) {
me.fireEvent('change', me, pageData);
}
},
onLoadError: function () {
if (!this.rendered) {
return;
}
//#region override
if (this.enableRefresh) {
this.setChildDisabled('#refresh', false);
}
//#endregion
},
beforeLoad: function () {
//#region override
var me = this;
if (me.rendered && me.enableRefresh) {
me.setChildDisabled('#refresh', true);
}
//#endregion
},
getPagingItems: function () {
var me = this,
items;
items = [{
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,
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',
text: 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
}];
//#region override
if (me.enableRefresh) {
items.push('-');
items.push({
itemId: 'refresh',
tooltip: me.refreshText,
overflowText: me.refreshText,
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
handler: me.doRefresh,
scope: me
});
}
//#endregion
return items;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment