如何使用卡片触发点击事件？

Question

我正在使用卡片处理 2 个面板。如果我点击 "Go to first" 它会把我带到第一个面板，如果我点击 "Go to second" 它会把我带到第二小组。这很好用！

问题是，我想在不使用 "Go to first" button 上已有的 handler 的情况下触发点击事件.简而言之，我希望能够触发点击事件来执行我的 sendMessage 函数。因此，如果我在第二个面板上并单击 "Go to first"，我想将第一个面板中的文本更新为：

"This is the first panel message-recieved"

谁能告诉我我的代码中缺少什么？到目前为止，我在 boxready 事件中触发了点击事件，但它只会在页面加载后被调用，之后我无法调用 sendMessage没有了。

代码片段：

listeners: {
    boxready: function (cmp) {
        cmp.down('[name=someButton]').fireEvent('click', me.sendMessage());
    }
}

LIVE DEMO

Answer 1

您必须在 panel 中添加 listeners 而不是方框。

你可以在这里看到： Live Demo

代码片段：

items: [{
    xtype: 'panel',
    title: 'First',
    html: 'This is the first panel',
    listeners: {
        show: function () {
            me.sendMessage(this.initialConfig.html);
        },
        render: function () {
            me.sendMessage(this.initialConfig.html);
        }
    }
}, {
    xtype: 'panel',
    title: 'Second',
    html: 'This is the second panel'
}]

Answer 2

看看这个fiddle。

代码片段：

{
    xtype: 'panel',
    title: 'First',
    itemId: 'firstPanel',
    html: 'This is the first panel',
    listeners: {
        activate: function (cmp) {
            cmp.up('panel').down('[name=someButton]').fireEvent('click', me.sendMessage());
        }
    }
}

Answer 3

因为您正在为 card 面板的子组件使用 card layout so you need to use activate 事件。

激活

在可视化激活组件后触发。

注意只有当此组件是布局时 Ext.container.Container that uses Ext.layout.container.Card 的子组件或此组件是浮动组件时才会触发此事件。

在此 Fiddle 中，我使用了您的代码并在子组件上使用 activate 事件进行了修改。

代码片段：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.application({
            name: 'Fiddle',

            launch: function () {
                var me = this,
                    sendMessage = function (msg) {
                        alert('message-recieved from : ' + msg);
                    };

                Ext.create('Ext.panel.Panel', {
                    renderTo: Ext.getBody(),
                    height: 400,
                    bodyPadding: 10,
                    title: 'Card Layout Example',
                    layout: 'card',
                    defaults: {
                        listeners: {
                            activate: function (panel) {
                                sendMessage(panel.msg);
                            }
                        }
                    },
                    items: [{
                        xtype: 'panel',
                        title: 'First',
                        msg: 'This Panel one activated',
                        html: 'This is the first panel'
                    }, {
                        xtype: 'panel',
                        title: 'Second',
                        msg: 'This Panel two activated',
                        html: 'This is the second panel'
                    }],
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        items: [{
                            text: '<- Go to first',
                            name: 'someButton',
                            handler: function (button) {
                                var panel = button.up('panel');
                                panel.layout.setActiveItem(0);
                            }
                        }, '->', {
                            text: 'Go to second ->',
                            handler: function (button) {
                                var panel = button.up('panel');
                                panel.layout.setActiveItem(1);
                            }
                        }]
                    }]
                });
            }
        });

    }
});

如何使用卡片触发点击事件？

How to fire click event using cards?

javascript

extjs

extjs4

extjs5