Запуск функции контроллера из ссылки ExtJS 6.6 - PullRequest
Новая
       42

Запуск функции контроллера из ссылки ExtJS 6.6

0 голосов
/ 25 октября 2018

Можно ли вызвать функцию контроллера из тега href внутри строки html?... Я не могу заставить что-то работать, так что я думаю, что могу делать что-то не так.

Я использую ExtJS 6.6

У меня есть некоторая информация о пользователе, а затем ссылка для выхода из системы, ноничего не работает, это то, что у меня есть. 

items: [{
    region: 'north',
    height: 200,
    items: [{
        xtype: 'panel',
        layout: 'column',
        items: [{
            xtype: 'panel',
            columnWidth: 0.3
        }, {
            xtype: 'panel',
            columnWidth: 0.7,
            html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br /><a href="#" class="logout">Log out</a></p></div>'
        }]
    }]
}]

Бит, который я не могу начать, это: 

<a href="#" class="logout">Log out</a>

Если я использую кнопку xtype, я могу вызвать ее через обработчик, и он отлично работает, но теперь мне нужно изменить его на текстовую ссылку.

Это код кнопки, который работает; 

{
    xtype: 'button',
    text: 'Logout',
    handler: 'onLogout'
}

Любая помощь в получении этой текстовой ссылки для вызова onLogout было бы фантастически.

Спасибо

1 Ответ

0 голосов
/ 25 октября 2018

Вы можете позвонить onLogout, используя Event delegation. Вам нужно подключить слушателя к вашему panel, как это 

{
    xtype: 'panel',
    listeners: {
        element: 'el',
        delegate: 'a.logout',
        click: 'onLogoutClick'
    }
}

Вы можете проверить здесь с работающей скрипкой .

Фрагмент кода 

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.myview',

    /**
     * This event will fire on Logout click
     */
    onLogoutClick: function(e) {
        console.log(e);
        Ext.Msg.alert('Success', 'You have clicked on logout button');
    }
});

Ext.create({
    xtype: 'panel',
    title: 'Running a controller function from an ExtJS 6.6 href link',
    layout: 'border',
    controller: 'myview',
    height: 200,
    items: [{
        region: 'north',
        height: 200,
        items: [{
            xtype: 'panel',
            layout: 'column',
            items: [{
                xtype: 'panel',
                columnWidth: 0.3
            }, {
                xtype: 'panel',
                columnWidth: 0.7,
                listeners: {
                    element: 'el',
                    delegate: 'a.logout',
                    click: 'onLogoutClick'
                },
                html: '<div class="userstuff" style="text-align: right;">Hello, welcome to my page<br /><a href="#" class="logout">Log out</a></p></div>'
            }]
        }]
    }],

    renderTo: Ext.getBody()
});
...