Why can't ref to refresh button?

Question

I'm creating an ExtJS 5.1.1 demo app. Try to give a refs for refresh button of gridpanel, so that I'll able to set a function for reload the data inside the grid.

I guess that I can't create correct refs for both Grid panel and Refresh button. Therefore click event is not working.

MainView:

Ext.define('MultiDB.view.DBMainView', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.dbmainview',
    requires: [ ... ],
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
             items: [{
                xtype: 'dbmenupanel',
                region: 'west'
            }, {
                xtype: 'dbgridpanel',
                region: 'center'
            }, {
                xtype: 'dbformpanel',
                region: 'south'
            }]
        });
        me.callParent();
    }
});

Grid Panel:

Ext.define('MultiDB.view.DBGridPanel', {
    extend: 'Ext.grid.Panel',
    xtype: 'dbgridpanel',
    store: 'FolioStore',
    requires: [...],

    title: 'ORest DB List',
    padding: 1,
    itemId: 'gridPanel',
    dockedItems: [...],

    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            tools: [{
                type: 'refresh',
                itemId: 'refreshBtn',
                tooltip: 'Refresh the DB',
                //handler: function () {alert('Click: Refresh Btn');}
            }],

            columns: [...]
        });
        me.callParent();
    }
});

Controller:

Ext.define('MultiDB.controller.DBMainController', {
    extend: 'Ext.app.Controller',
    views: ['DBGridPanel'],

    refs: {
        formPanel: 'dbformpanel#formPanel',
        gridPanel: 'dbgridpanel#gridPanel',
        mainView: 'dbmainview#mainView',
        registrationBtn: 'splitbutton#registrationBtn',
        refreshBtn: 'dbmainview dbgridpanel#refreshBtn'
    },

    init: function (application) {
        this.control({
            "menuitem[opt]": {
                click: this.setFormPanel
            },
            "dbmainview dbgridpanel#refreshBtn": {
                viewready: this.doRefresh
            }
        });
    },

    setFormPanel: function (item) {...},

    doRefresh: function () {
        console.log('this is doInit!');
        this.getGridPanel().getStore().load();
    }

});

Alexander · Accepted Answer · 2017-08-14T09:23:11.607

The ref to the gridpanel seems to be correct. But the syntax of your ref to the refreshBtn is incorrect. Let's start with taking apart some correct syntax:

dbgridpanel#gridPanel

This says that the ref should resolve to a widget with xtype dbgridpanel and id gridPanel.

dbgridpanel#refreshBtn

say that the ref should resolve to a widget with xtype dbgridpanel and id refreshBtn, which cannot be resolved, because said id is used for a tool, not a dbgridpanel.

The correct ref to your refresh tool would be

dbgridpanel #refreshBtn

which tells the ref to resolve to a widget with id refreshBtn which is a child of another widget of xtype dbgridpanel, or in the long form (which I recommend to use for clarity)

dbgridpanel#gridPanel tool#refreshBtn

which tells the ref to resolve to a widget with xtype tool and id refreshBtn which is a child of another widget with xtype dbgridpanel and id gridPanel.

That works wonderful... Thanks a lot @Alexandar. BTW I had to change `viewready: this.doRefresh` to `click: this.doRefresh`. Now when I checked Chrome Dev-Tool's **Network** tab, the new list is loading w/out any problem. =) — Nuri Engin, Aug 14 '17 at 07:43

Why can't ref to refresh button?

1 Answers1