ExtJs Ext.PagingToolbar: hide or set parameters for the refresh button onclick?

Question

No customized setup for the refresh button, so I am trying to hide/remove it. hideRefresh: true didn't work for me.

If there is no way to hide it, can I at least pass some parameters when the button is clicked, so I can make it do some meaningful tasks?

pPanel = new Ext.Panel({
    applyTo: 'newProgWin',
    autoScroll:true,
    styleClass: 'formInput',
    bodyStyle: 'overflow-x: hidden',
    align: 'center',
    layout:'fit',
    width:899,
    height:450,
    closeAction:'hide',
    plain: true,
    items: winDataView = new Ext.DataView({
        tpl: resultTpl,
        store: npDs,
       itemSelector: 'div.search-item'
    }),

    tbar: [
                'Search: ', ' ',
            (winSearchField = new Ext.ux.form.SearchField({
                store: npDs,
                width:300
            }))
        ],
    bbar: new Ext.PagingToolbar({
                beforeLoad : function()
                {
                    pocProxy.extraParams = {
                        eps: currentProgs,
                        stateful: true,
                        dataCall: dataCallId,
                        orgNameConvention: currentOnc,
                        installation: currentInstallation
                    };
                },   
                store: npDs,
                pageSize: pageSize,
                displayInfo: true,
               //hideRefresh: true,
                displayMsg: 'Organizations {0} - {1} of {2}',
                emptyMsg: "No Organizations available to display"

            })
});

Solution 1

There isn't a property for hideRefresh in the Ext.PagingToolbar.

You can access the refresh button via the bbar (the Ext.PagingToolbar instance) object.

pPanel.bbar.refresh

You can hide it using the hide() function.

pPanel.bbar.refresh.hide()

You can also hide it in your afterrender event in your Ext.PagingToolbar:

listeners: {
    afterrender: function() {
        this.refresh.hide();
    }
}

You can modify the behavior of the refresh button by overriding the doRefresh function in the bbar

pPanel.bbar.doRefresh

Regarding your code, it's not a good idea to overriding the beforeLoad function you'll be tinkering with the innards unless its intentional. Maybe moving it to the store object instead?

Make sure you check out the documentation and its code as well because that would help you with debugging. ;)

Solution 2

This code working fine for me:

this.bbar = Ext.create('Ext.PagingToolbar', {
            store: 'Interactions',
            displayInfo: false,
            preprendButtons: false,
           listeners: {
                afterrender : function() {
                    this.child('#refresh').hide();
                }
            }
        });

Solution 3

 listeners:{
    afterrender:function(){
        var a = Ext.query("button[data-qtip=Refresh]"); 
        for(var x=0;x < a.length;x++)
        {
            a[x].style.display="none";
        }
    }
}

Comments

[JoJoAngel]

Hi, CincauHangus. actually i tried and Hide method, but somehow pPanel.bbar.refresh doesn't return anything. to hide it with listeners works for me. thanks a lot for your help :)

[CincauHangus]

Glad it helped. Do mark my answer as the solution if it satisfies your question. Thanks