Changing order of buttons on PagingToolbar

[jrcunha]

Hi,

Exist any way to change the order of buttons inside the pagingToolBar? I woud like to put the pager buttons on the right side and my custom buttons on left side.

Tks

Junior Cunha

[jay@moduscreate.com]

write an extension (or plugin) for it.

[jrcunha]

Tks for the reply!

Exist some "easy" way to write an plugin or extend this class? All the examples i have found show howto plug/extend Ext.form.Combobox. Something more generic may help.

Regards.
Junior Cunha

[jay@moduscreate.com]

var myPagingToolbar = Ext.Extend(Ext.PagingToolbar,{
    //Re order your buttons here
    onRender : function(ct, position){
        Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
        this.first = this.addButton({
            tooltip: this.firstText,
            iconCls: "x-tbar-page-first",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["first"])
        });
        this.prev = this.addButton({
            tooltip: this.prevText,
            iconCls: "x-tbar-page-prev",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["prev"])
        });
        this.addSeparator();
        this.add(this.beforePageText);
        this.field = Ext.get(this.addDom({
           tag: "input",
           type: "text",
           size: "3",
           value: "1",
           cls: "x-tbar-page-number"
        }).el);
        this.field.on("keydown", this.onPagingKeydown, this);
        this.field.on("focus", function(){this.dom.select();});
        this.afterTextEl = this.addText(String.format(this.afterPageText, 1));
        this.field.setHeight(18);
        this.addSeparator();
        this.next = this.addButton({
            tooltip: this.nextText,
            iconCls: "x-tbar-page-next",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["next"])
        });
        this.last = this.addButton({
            tooltip: this.lastText,
            iconCls: "x-tbar-page-last",
            disabled: true,
            handler: this.onClick.createDelegate(this, ["last"])
        });
        this.addSeparator();
        this.loading = this.addButton({
            tooltip: this.refreshText,
            iconCls: "x-tbar-loading",
            handler: this.onClick.createDelegate(this, ["refresh"])
        });

        if(this.displayInfo){
            this.displayEl = Ext.fly(this.el.dom).createChild({cls:'x-paging-info'});
        }
        if(this.dsLoaded){
            this.onLoad.apply(this, this.dsLoaded);
        }
    }



});

[jrcunha]

Tks!!!! Now i'm getting this error on Firebug ( Ext.Extend is not a function );

I already added the needed dependencies:
<!-- ExtJS CSS and JS -->
<link rel="stylesheet" type="text/css" href="/libjs/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/libjs/extjs/resources/css/xtheme-gray.css">
<script type="text/javascript" src="/libjs/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/libjs/extjs/ext-all.js"></script>

I copy and paste your code in a new javascript file and included it below the Ext files.

Best Regards

Junior Cunha

[jrcunha]

Sorry.... extended is right not Extended. No errors appear now, but i don't know how to use this. The variable myPagingToolbar is a new class, or just a function?? How to apply this on the PagingToolbar?

Tks.

Junior Cunha

[jay@moduscreate.com]

sorry, it's a typeo .

Ext.extend, not Ext.extended.

use new myPagingToolbar({ ... config options here });

[jrcunha]

Really tks jgarcia!!!! Works realy nice!!!! Attached an screenshot of the result.

Best Regards.

[oburlaca]

jrcunha,can you please post your code that displays the PagingToolbar buttons on the right?
By the way, I found a similar topic (http://extjs.com/forum/showthread.php?t=25723&page=2), but it's unclear what is the correct way to go.

Ah, I just get it working! I thought myPagingToolbar will automatically place the paging buttons to the right.
I added

this.addButton({
	text: 'Cool'
	});
this.addFill();

just before the "this.first = this.addButton({" line.

I wonder how to create a more abstract PagingToolbar that will be able to understand the following:

bbar: new Ext.PagingToolbar({ 
	store: dsStore,
	items: [{text: 'Btn1'}, '->', 'PAGING', '-', {text: 'Btn2'}]
})

where 'PAGING' means the actual PagingToolbar buttons.