代码之家 › 专栏 › 技术社区 › Devmix

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

extjs5 extjs4 extjs javascript

Devmix · 技术社区 · 7 年前

我在用两张卡片做两个面板。如果我点击 “转到第一个” 它带我到第一个面板,如果我点击 “转到第二个” 我要去第二个小组。这很管用!

问题是,我想在不使用 handler 已经在 “转到第一个” button . 简单地说,我希望能够触发click事件来执行 小精灵 功能。所以如果我在第二个面板上点击 “转到第一个” 我想更新第一个面板内的文本,说:

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

有人能告诉我我的密码里少了什么吗?到目前为止,我在 小精灵 事件,但它只在页面加载一次后被调用,之后我无法调用 小精灵 不再。

代码段:

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

LIVE DEMO

3 回复 | 直到 7 年前

halfer 6 年前

当你使用 card 布局以便您需要使用 activate 的子组件的事件 卡片 面板。

激活

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

注释仅当此组件是 Ext.container.Container 使用的 Ext.layout.container.Card 因为它是布局或者这个组件是浮动组件。

在这 Fiddle ,我已经使用了您的代码并将修改与 激活 子组件上的事件。

代码段:

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);
                            }
                        }]
                    }]
                });
            }
        });

    }
});

Rohit Sharma 7 年前

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

Rohit Sharma 7 年前

你得加上 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'
}]