ExtJs Ext.PagingToolbar: скрыть или установить параметры для кнопки обновления по клику?

Question

Нет пользовательских настроек для кнопки обновления, поэтому я пытаюсь скрыть / удалить ее. hideRefresh: true не работает для меня.

Если нет способа скрыть это, могу ли я хотя бы передать некоторые параметры при нажатии кнопки, чтобы я мог заставить ее выполнять некоторые значимые задачи?

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"

            })
});

Answer 1

В Ext.PagingToolbar отсутствует свойство для hideRefresh.

Доступ к кнопке обновления можно получить через объект bbar (экземпляр Ext.PagingToolbar).

pPanel.bbar.refresh

Вы можете скрыть его с помощью функции hide().

pPanel.bbar.refresh.hide()

Вы также можете скрыть его в своем событии afterrender на панели Ext.PagingToolbar:

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

Вы можете изменить поведение кнопки обновления, переопределив функцию doRefresh в bbar

pPanel.bbar.doRefresh

Что касается вашего кода, это не хорошоИдея переопределить функцию beforeLoad, вы будете возиться с внутренностями, если она не является намеренной.Может быть, вместо этого переместить его в объект хранилища?

Убедитесь, что вы также ознакомились с документацией и ее кодом, потому что это поможет вам в отладке.;)

Answer 2

У меня нормально работает этот код:

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

Answer 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";
        }
    }
}

Answer 4

По крайней мере в ExtJS 6.5.2 (классический) вы можете переопределить действие обновления следующим образом:

bbar: {
    xtype: 'pagingtoolbar',
    doRefresh: function () {
        console.log('Overriding refresh action');
        Ext.getStore('myStore').load({
            params: { // add custom params to existing params
                customParam: 'customValue'
            }
        });
        return false; // cancel load
    }
}

Answer 5

В ExtJs 6.2 мне пришлось использовать этот код:

var toolbar = this.lookupReference('pagingtoolbar');      
toolbar.on('afterrender', function () {
    this.getComponent('refresh').hide();
});

Answer 6

Вы можете придать панели инструментов немного меньшую ширину, чтобы компонент обновления был скрыт: P