Question

我创建了两个面板。我希望panel2在单击按钮时显示在Panel1下面。我需要在按钮中添加什么样的听众来实现这一目标？示例代码如下

var panel1 = Ext.create('Ext.form. Panel', {

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        html: 'hello'
    },
    {
        xtype: 'button',
        text: 'click me'
    }]
});

var panel2 = Ext.create('Ext.form. Panel', {

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        html: 'world'}]
});

这里我希望点击按钮后显示html'world'。有办法吗？

Answer 1

当然，你要找的是按钮配置handler，它处理按钮的点击。您还可以在按钮上使用事件click或tap（取决于您是在Classic还是Modern框架中）。在此函数中，您将获得按钮所在的FormPanel（获取父级），并且您可以添加任何新项目。

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.myformpanel',

    requires: [
        'Ext.Button'
    ],

    layout: 'vbox',
    title: 'My Form',

    items: [{
        xtype: 'button',
        handler: function (button, e) {
            var panel2 = Ext.create('Ext.form.Panel', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    html: 'world'
                }]
            })

            button.getParent().add(panel2);
        },
        text: 'MyButton'
    }, {
        html: 'something'
    }]

});


Ext.application({
    views: [
        'MyFormPanel'
    ],
    name: 'MyApp',

    launch: function () {
        Ext.create('MyApp.view.MyFormPanel', {
            fullscreen: true
        });
    }

});

以下是工作示例：https://fiddle.sencha.com/#view/editor&fiddle/1sqr

再次通过你的问题阅读，你似乎在问自己的形式，在这种情况下，你需要容器或其他东西来放置两种形式。

您可以将此容器设置为id，而不是仅调用button.getParent()，而是调用var cnt = Ext.ComponentQuery.query('#myId')，这将返回您的对象数组，以便您执行cnt[0].add(panel2);或你可以使用Ext.first('#myId').add(panel2)

另外请不要忘记，在ExtJS框架中有很多方法可以实现这一点，而这只是其中之一。

按钮单击显示面板

1 个答案: