0

我正在创建一个 ExtJS 5.1.1 演示应用程序。尝试给gridpanel一个刷新按钮refs,这样我就可以设置一个函数来重新加载网格内的数据。

我想我无法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();
    }

});
4

1 回答 1

1

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

dbgridpanel#gridPanel

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

dbgridpanel#refreshBtn

说 ref 应该解析为具有 xtypedbgridpanel和 id的小部件refreshBtn,这是无法解析的,因为所述 id 用于 a tool,而不是 a dbgridpanel

刷新工具的正确参考是

dbgridpanel #refreshBtn

它告诉 ref 解析为具有 id 的小部件,refreshBtn该小部件是 xtype 的另一个小部件的子级dbgridpanel,或者采用长格式(为了清楚起见,我建议使用它)

dbgridpanel#gridPanel 工具#refreshBtn

它告诉 ref 解析为具有 xtype 和 id 的小部件,该小部件toolrefreshBtn另一个具有 xtypedbgridpanel和 id的小部件的子级gridPanel

于 2017-08-13T18:02:52.300 回答