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。