如何使用卡片点击事件？

Question

我正在使用卡片处理2个面板。如果我点击“转到第一个”，它会将我带到第一个面板，如果我点击“转到第二个”，它会将我带到第二个面板。这很棒！

• 问题在于，我想在不使用“转到第一个” handler上的button的情况下触发点击事件。简单来说，我希望能够触发click事件来执行我的 sendMessage 功能。因此，如果我在第二个面板上并点击“转到第一个”我想更新第一个面板内的文字说：

  

“这是收到消息的第一个面板”

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

代码段：

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

LIVE DEMO

Answer 1

当您使用card布局时，您需要对card面板的子组件使用activate事件。

• 启用

  在视觉激活组件后触发。

  注意只有当此组件是使用Ext.container.Container作为其布局的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);
                            }
                        }]
                    }]
                });
            }
        });

    }
});

Answer 2

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

您可以在此处看到： 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 3

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