1. #1
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    jrcunha is on a distinguished road

      0  

    Default Changing order of buttons on PagingToolbar

    Changing order of buttons on PagingToolbar


    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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    write an extension (or plugin) for it.

  3. #3
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    jrcunha is on a distinguished road

      0  

    Default


    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

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Code:
    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);
            }
        }
    
    
    
    });

  5. #5
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    jrcunha is on a distinguished road

      0  

    Default


    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

  6. #6
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    jrcunha is on a distinguished road

      0  

    Default


    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

  7. #7
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    sorry, it's a typeo .

    Ext.extend, not Ext.extended.

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

  8. #8
    Ext User
    Join Date
    Sep 2008
    Posts
    10
    Vote Rating
    0
    jrcunha is on a distinguished road

      0  

    Default


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

    Best Regards.
    Attached Images

  9. #9
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    40
    Vote Rating
    0
    oburlaca is on a distinguished road

      0  

    Default


    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
    Code:
    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:
    Code:
    bbar: new Ext.PagingToolbar({ 
    	store: dsStore,
    	items: [{text: 'Btn1'}, '->', 'PAGING', '-', {text: 'Btn2'}]
    })
    where 'PAGING' means the actual PagingToolbar buttons.
    AeroSQL - Web based MySql manager (PHP+ExtJS)
    www.burlaca.com - My blog