Почему нельзя ссылаться на кнопку обновления?

Я создаю демонстрационное приложение ExtJS 5.1.1. Попробуйте указать refs для кнопки обновить панели gridpanel, чтобы я мог установить функцию для перезагрузки данных внутри сетки.

Я предполагаю, что я не могу создать правильный 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();
    }

});

person Nuri Engin    schedule 11.08.2017    source источник


Ответы (1)


Ссылка на панель сетки кажется правильной. Но синтаксис вашей ссылки на refreshBtn неверен. Давайте начнем с разбора правильного синтаксиса:

dbgridpanel#gridPanel

Это говорит о том, что ссылка должна разрешаться в виджет с xtype dbgridpanel и id gridPanel.

dbgridpanel#refreshBtn

скажем, что ссылка должна разрешаться в виджет с xtype dbgridpanel и идентификатором refreshBtn, который не может быть разрешен, потому что указанный идентификатор используется для tool, а не dbgridpanel.

Правильная ссылка на ваш инструмент обновления будет

dbgridpanel #refreshBtn

который указывает ссылке разрешить виджет с идентификатором refreshBtn, который является дочерним элементом другого виджета xtype dbgridpanel, или в длинной форме (которую я рекомендую использовать для ясности)

Инструмент dbgridpanel#gridPanel#refreshBtn

который сообщает ссылке разрешить виджет с xtype tool и id refreshBtn, который является дочерним элементом другого виджета с xtype dbgridpanel и id gridPanel.

person Alexander    schedule 13.08.2017
comment
Это прекрасно работает... Большое спасибо @Alexandar. Кстати, мне пришлось изменить viewready: this.doRefresh на click: this.doRefresh. Теперь, когда я проверил вкладку Сеть в Chrome Dev-Tool, новый список загружается без каких-либо проблем. знак равно - person Nuri Engin; 14.08.2017