为什么不能引用刷新按钮？

Question

我正在创建一个 ExtJS 5.1.1 演示应用程序。尝试为 gridpanel 的 refresh 按钮提供一个 refs，这样我就可以设置一个函数来重新加载里面的数据网格。

我想我无法为 Grid 面板和 Refresh 按钮创建正确的 refs。因此点击事件不起作用。

主视图:

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

});

Answer 1

网格面板的引用似乎是正确的。但是您对 refreshBtn 的引用语法不正确。让我们从分解一些正确的语法开始：

dbgridpanel#gridPanel

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

dbgridpanel#refreshBtn

说 ref 应该解析为 xtype dbgridpanel 和 id refreshBtn 的小部件，这是无法解析的，因为所述 id 用于 tool，而不是 dbgridpanel.

刷新工具的正确引用是

dbgridpanel #refreshBtn

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

dbgridpanel#gridPanel tool#refreshBtn

告诉 ref 解析为 xtype tool 和 id refreshBtn 的小部件，它是另一个 xtype dbgridpanel 和 id gridPanel 的小部件的子项。

为什么不能引用刷新按钮？

Why can't ref to refresh button?

controller

extjs

view

refs