View Full Version : pagging form

13 Nov 2009, 6:08 AM
hi guys, I've got a question if possible use de pagging toolbar in a form? how will be the JSON because I don't have root or totalproperty like a grid

13 Nov 2009, 6:11 AM
i don't get it. You want to use the paging toolbar to be able to flip through one record at a time via paging toolbar?

13 Nov 2009, 6:20 AM
well, I mean, I've a form with only textbox and combos, and I want to put the pagging control inside of the form, when I clicked next, the data of the form like textbox and combos change

13 Nov 2009, 6:26 AM
Interesting concept. You will still need a root element so you can load the data into a store. The paging toolbar is not going to be useful as it is, because it is meant for retrieving records in sets from the server.

Sounds like your going to have to write a UX for this. Enjoy!

13 Nov 2009, 7:08 AM
mmm and how can I do that?, well I'm still a newbie, someone can post an example?

13 Nov 2009, 7:09 AM
Here, I just kinda hacked this together...use at your own risk. It makes the assumption that its a child of the form that's being paged, which might not always be the case. Either way, you can modify this to your liking.

Ext.ux.RecordPagingToolbar = Ext.extend(Ext.PagingToolbar, {

pageSize: 1,
displayMsg : 'Displaying Record {0} of {2}',
beforePageText : 'Record',
afterPageText : 'of {0}',
firstText : 'First Record',
prevText : 'Previous Record',
nextText : 'Next Record',
lastText : 'Last Record',

initComponent : function(){
this.on('afterlayout', function(){
this.cursor = 0;
}, this, {single: true});

getPageData : function(){
var total = this.store.getTotalCount();
return {
total : total,
activePage : (this.cursor+1),
pages : total

onLoad : function(store, r, o){
this.dsLoaded = [store, r, o];

var d = this.getPageData(), ap = d.activePage, ps = d.pages;

this.afterTextItem.setText(String.format(this.afterPageText, d.pages));
this.first.setDisabled(ap == 1);
this.prev.setDisabled(ap == 1);
this.next.setDisabled(ap == ps);
this.last.setDisabled(ap == ps);
this.fireEvent('change', this, d);

doLoad : function(start){
var o = {}, pn = this.getParams();
this.cursor = start;
o[pn.start] = start;
o[pn.limit] = this.pageSize;
if(this.fireEvent('beforechange', this, o) !== false){


Ext.reg('recordpaging', Ext.ux.RecordPagingToolbar);


var gridForm = new Ext.FormPanel({
bbar: [new Ext.ux.RecordPagingToolbar({store:your_store})],