How to fire click event using cards?

Question

I'm working with 2 panels using cards. If I click on "Go to first" it takes me to First Panel and if I click on "Go to second" it takes me to the Second Panel. This works great!

• The issue is that, I want to fire a click event without using the handler that is already on the "Go to first" button. In simple words, I want to be able to fire click event to execute my sendMessage function. So if I'm on Second Panel and click on "Go to first" I want to update the text that is inside First Panel to say:

"This is the first panel message-recieved"

Can anyone tell me what I'm missing in my code? So far I'm firing the click event inside the boxready event, but it will only get called once page loads and after that I cannot call sendMessage anymore.

Code snippet:

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

LIVE DEMO

Answer 1

As you are using card layout so you need to use activate event for child component of card panel.

• activate

  Fires after a Component has been visually activated.

  Note This event is only fired if this Component is a child of a Ext.container.Container that uses Ext.layout.container.Card as it's layout or this Component is a floating Component.

In this Fiddle, I have used your code and put modification with activate event on child components.

Code snippet:

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

You have to add listeners in panel instead of box.

You can see here: Live Demo

Code snippet:

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

Have a look at this fiddle.

Code snippet:

{
    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());
        }
    }
}