extjs4 - Extjs 4/煎茶

Question

我是初级 Sencha/Extjs 用户，我正在尝试做一些我确信它很简单但仍然不知道如何做的事情。

正如你在这里看到的：

我有 2 个面板，一个称为“面板 1”，另一个被隐藏并称为“面板 2”，我还有 2 个工具栏，一个带有名为“转到面板 2”的按钮，当我按下它时，我应该得到这个：

应该隐藏“面板 1”，并且“面板 2”与第二个工具栏一起出现，该工具栏有另一个名为“转到面板 1”的按钮

我希望我说得足够清楚。我可以做上面的事情，但我认为我使用了一种愚蠢的方式，我在按钮 1 上使用带有函数 onButtonClick 的事件绑定：

Ext.getCmp('p2').show();
Ext.getCmp('tb2').show();
Ext.getCmp('p1').hide();
Ext.getCmp('tb1').hide();

在按钮 2 上反之亦然：

Ext.getCmp('p1').show();
Ext.getCmp('tb1').show();
Ext.getCmp('p2').hide();
Ext.getCmp('tb2').hide();

现在，我确信有更好的方法可以使用控制器来实现这一点，但我需要有人详细解释我如何做到这一点，因为正如我所说，我没有经验。

谢谢你。

编辑

我也需要做到这一点：

Button 1 --> panel 1

Item 1 --> panel 2

Item 2 --> panel 3

Answer 1

您可以使用卡片布局来制作这种 UI。在此处查看文档和实时示例。

Answer 2

如果视图看起来像

Ext.define('MyApp.view.parentpanel', {
    extend: 'Ext.panel.Panel',

    height: 250,
    width: 400,
    activeItem: 0,
    layout: {
        type: 'card'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    html: 'i\'m panel 1',
                    bodyPadding: 10,
                    title: 'panel 1'
                },
                {
                    xtype: 'panel',
                    html: 'i\'m panel 2',
                    bodyPadding: 10,
                    title: 'panel 2'
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'button',
                            text: 'go to panel 2'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

控制器将类似于

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',

    views: [
        'parentpanel'
    ],

    onButtonClick: function(button, e, options) {
        var me = this,
            parentPanel = button.up('panel'),
            layout = parentPanel.getLayout(),
            activeItem = layout.getActiveItem(),
            title = activeItem.title,
            index = (title === 'panel 1' ? 1 : 0);

        layout.setActiveItem(index);
        button.setText('go to ' + title);
    },

    init: function() {
        this.control({
            "button": {
                click: this.onButtonClick
            }
        });

    }

});