Extjs 4/Sencha

Question

我是一名初级Sencha/Extjs用户，我正在尝试做一些我确信它很简单但仍然无法解决的问题。

，你可以在这里看到：

我有2个小组，一个名为“面板1”，另一个是隐藏的，被称为“板2” 还我有2个工具栏，一个用按钮叫“去面板2”，当我按下它，我应该得到这样的：

一个“板1”应该被隐藏和“板2”与第二栏是有另一个出现按钮叫'去面板1'

我希望我说得够清楚。按钮2

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

，反之亦然： 我可以做上面的东西，但我想我用一个笨方法，我用一个事件与功能结合onButtonClick按钮1

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

如果视图看起来像

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

    } 

}); 

Answer 2

你可以使用卡片布局做出这种的UI。 Check documentation and Live example here。