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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi