PDA

View Full Version : [SOLVED] Ext.PagingToolbar how do you set Displaying 1-10 of 20 message to left side?



borg
16 Dec 2009, 10:59 AM
Please note this code is for Ext-3.0.3

Just took the code from this link, did an override and commented out that one part in red below
http://www.extjs.com/deploy/dev/docs/source/PagingToolbar.html#cls-Ext.PagingToolbar


Ext.override(Ext.PagingToolbar, {
initComponent: function(){
var pagingItems = [this.first = new Ext.Toolbar.Button({
tooltip: this.firstText,
overflowText: this.firstText,
iconCls: 'x-tbar-page-first',
disabled: true,
handler: this.moveFirst,
scope: this
}), this.prev = new Ext.Toolbar.Button({
tooltip: this.prevText,
overflowText: this.prevText,
iconCls: 'x-tbar-page-prev',
disabled: true,
handler: this.movePrevious,
scope: this
}), '-', this.beforePageText,
this.inputItem = new Ext.form.NumberField({
cls: 'x-tbar-page-number',
allowDecimals: false,
allowNegative: false,
enableKeyEvents: true,
selectOnFocus: true,
submitValue: false,
listeners: {
scope: this,
keydown: this.onPagingKeyDown,
blur: this.onPagingBlur
}
}), this.afterTextItem = new Ext.Toolbar.TextItem({
text: String.format(this.afterPageText, 1)
}), '-', this.next = new Ext.Toolbar.Button({
tooltip: this.nextText,
overflowText: this.nextText,
iconCls: 'x-tbar-page-next',
disabled: true,
handler: this.moveNext,
scope: this
}), this.last = new Ext.Toolbar.Button({
tooltip: this.lastText,
overflowText: this.lastText,
iconCls: 'x-tbar-page-last',
disabled: true,
handler: this.moveLast,
scope: this
}), '-', this.refresh = new Ext.Toolbar.Button({
tooltip: this.refreshText,
overflowText: this.refreshText,
iconCls: 'x-tbar-loading',
handler: this.doRefresh,
scope: this
})];


var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
}else{
this.items = pagingItems.concat(userItems);
}
delete this.buttons;
if(this.displayInfo){
// this.items.push('->');
this.items.push(this.displayItem = new Ext.Toolbar.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);
this.addEvents(
'change',
'beforechange'
);
this.on('afterlayout', this.onFirstLayout, this, {single: true});
this.cursor = 0;
this.bindStore(this.store, true);
}
});

16 Dec 2009, 11:08 AM
look at the source/widgets/PagingToolbar.js file, copy the method that configures the order of the buttons, alter it, and set it as an override.

borg
16 Dec 2009, 11:37 AM
Tried the below, Firebug says javascript errors because T and t are undefined. Any suggestions?


Ext.override(Ext.PagingToolbar, {
initComponent: function(){
var pagingItems = [this.first = new T.Button({
tooltip: this.firstText,
iconCls: "x-tbar-page-first",
disabled: true,
handler: this.onClick,
scope: this
}), this.prev = new T.Button({
tooltip: this.prevText,
iconCls: "x-tbar-page-prev",
disabled: true,
handler: this.onClick,
scope: this
}), '-', this.beforePageText,
this.inputItem = new T.Item({
height: 18,
autoEl: {
tag: "input",
type: "text",
size: "3",
value: "1",
cls: "x-tbar-page-number"
}
}), this.afterTextItem = new T.TextItem({
text: String.format(this.afterPageText, 1)
}), '-', this.next = new T.Button({
tooltip: this.nextText,
iconCls: "x-tbar-page-next",
disabled: true,
handler: this.onClick,
scope: this
}), this.last = new T.Button({
tooltip: this.lastText,
iconCls: "x-tbar-page-last",
disabled: true,
handler: this.onClick,
scope: this
}), '-', this.refresh = new T.Button({
tooltip: this.refreshText,
iconCls: "x-tbar-loading",
handler: this.onClick,
scope: this
})];


var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
}else{
this.items = pagingItems.concat(userItems);
}
delete this.buttons;
if(this.displayInfo){
// this.items.push('->');
this.items.push(this.displayItem = new T.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);
this.addEvents(
'change',
'beforechange'
);
this.on('afterlayout', this.onFirstLayout, this, {single: true});
this.cursor = 0;
this.bindStore(this.store);
}
});

16 Dec 2009, 11:40 AM
(function() {

var T = Ext.Toolbar;

Ext.override(Ext.PagingToolbar, {
initComponent: function(){
var pagingItems = [this.first = new T.Button({
tooltip: this.firstText,
iconCls: "x-tbar-page-first",
disabled: true,
handler: this.onClick,
scope: this
}), this.prev = new T.Button({
tooltip: this.prevText,
iconCls: "x-tbar-page-prev",
disabled: true,
handler: this.onClick,
scope: this
}), '-', this.beforePageText,
this.inputItem = new T.Item({
height: 18,
autoEl: {
tag: "input",
type: "text",
size: "3",
value: "1",
cls: "x-tbar-page-number"
}
}), this.afterTextItem = new T.TextItem({
text: String.format(this.afterPageText, 1)
}), '-', this.next = new T.Button({
tooltip: this.nextText,
iconCls: "x-tbar-page-next",
disabled: true,
handler: this.onClick,
scope: this
}), this.last = new T.Button({
tooltip: this.lastText,
iconCls: "x-tbar-page-last",
disabled: true,
handler: this.onClick,
scope: this
}), '-', this.refresh = new T.Button({
tooltip: this.refreshText,
iconCls: "x-tbar-loading",
handler: this.onClick,
scope: this
})];


var userItems = this.items || this.buttons || [];
if (this.prependButtons) {
this.items = userItems.concat(pagingItems);
}else{
this.items = pagingItems.concat(userItems);
}
delete this.buttons;
if(this.displayInfo){
// this.items.push('->');
this.items.push(this.displayItem = new T.TextItem({}));
}
Ext.PagingToolbar.superclass.initComponent.call(this);
this.addEvents(
'change',
'beforechange'
);
this.on('afterlayout', this.onFirstLayout, this, {single: true});
this.cursor = 0;
this.bindStore(this.store);
}
});

})();

borg
16 Dec 2009, 11:45 AM
OK. now firebug says


this.inputItem.setValue is not a function

http://trac.geoext.org/browser/ext/3.0.0/docs/source/PagingToolbar.html

16 Dec 2009, 11:50 AM
Uh yeah! That's because this.inputItem was an Ext.form.NumberField before your override ;)

change the order of the items, not their references.

borg
16 Dec 2009, 12:05 PM
thanks, updated root with override function code so ppl can use it

16 Dec 2009, 12:07 PM
Thanks :)

borg
17 Dec 2009, 9:51 AM
Well it's not so solved, the paging buttons don't do anything now. no POST is ever sent