Extjs 为什么可以'；t参考刷新按钮？

我正在创建一个ExtJS 5.1.1演示应用程序。尝试为gridpanel的refresh按钮提供

refs

，以便我能够设置一个函数，用于在网格内重新加载数据

我猜我无法为网格面板和刷新按钮创建正确的

参考。因此，单击事件不起作用

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();
    }
});

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();
    }
});

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();
    }

});

网格面板：

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();
    }
});

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();
    }
});

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();
    }

});

控制器：

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();
    }
});

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();
    }
});

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();
    }

});

对gridpanel的引用似乎是正确的。但是refreshBtn的ref语法不正确。让我们先分析一些正确的语法：

dbgridpanel#gridPanel

这表示ref应该解析为具有xtype
dbgridpanel
和id
gridPanel
的小部件

dbgridpanel#刷新BTN

假设ref应该解析为具有xtype
dbgridpanel
和id
refreshBtn
的小部件，该小部件无法解析，因为所述id用于
工具，而不是
dbgridpanel

对刷新工具的正确引用是

dbgridpanel#刷新BTN

它告诉ref解析为id为
refreshBtn
的小部件，该小部件是另一个xtype
dbgridpanel
小部件的子部件，或者是长格式的小部件（为了清晰起见，我建议使用）

dbgridpanel#gridPanel工具#refreshBtn

它告诉ref解析到一个具有xtype
tool
和id
refreshBtn
的小部件，该小部件是另一个具有xtype
dbgridpanel
和id
gridPanel
的小部件的子部件，工作非常出色。。。非常感谢@Alexandar。顺便说一句，我必须将
viewready:this.doRefresh
更改为
单击：this.doRefresh
。现在，当我查看Chrome开发工具的“网络”选项卡时，新列表正在加载，但没有任何问题。=）