如何讓面板在Sencha ExtJs中點擊按鈕左右導航

Question

我在Extjs中創建了3個面板，2個按鈕（上一個，下一個）並添加到視口中。 一次只能看到一個面板（默認爲第一個面板）。 單擊下一個按鈕它應該顯示下一個面板，然後如果我點擊「prev」按鈕，它應該顯示前一個面板。

現在我寫了一個面板的代碼，它的工作原理是，面板不能正確導航到左右。

這裏是我的代碼：

Ext.application({ 
name: 'HelloExt', 
requires: [ 
'Ext.util.Point' 

], 
launch: function() { 

var button =Ext.create('Ext.Button', { 
    text: 'Toggle Containers', 
    handler: function() {  

    if (this.clickCount==1) {    
     containerPanel1.getEl().scrollRight; 
     containerPanel2.getEl().slideIn('t', 'toggle'); 
     this.clickCount=2; 

    } else { 

     this.clickCount = 1;    
     containerPanel1.getEl().slideIn('t', 'toggle'); 
     containerPanel2.getEl().scrollLeft; 

     } 

    }, 
    renderTo: Ext.getBody() 
}); 


var containerPanel1 = Ext.create('Ext.panel.Panel', { 
renderTo: Ext.getBody(), 
draggable: { 
     insertProxy: false, 

     startDrag: function(e) { 
     var el = Ext.get(this.getEl()); 
     el.dd = new Ext.dd.DDProxy(el.dom.id, 'group'); 
     this.x = el.getLeft(true); 
     this.y = el.getTop(true);   
     },   

     afterDrag: function(e) { 
      this.x = el.getLeft(true); 
      this.y = el.getTop(true); 
      this.fireEvent('itemdrag', this); 

     } 
    }, 
width:400, 
height:550,  
layout: 'column', 
bodyStyle:{'background-color':'blue'}, 
margin:'30 0 0 20', 
suspendLayout: true , 
defaults :{ 
xtype: 'panel', 
margin:'30 0 0 0', 
height: 450, 
columnWidth: 0.2 
}, 

items: [ 
    { 
     html: 'Child Panel 1',    
    }, 
    {   
     html: 'Child Panel 2',   
    }, 
    {   
     html: 'Child Panel 3',   
    }, 
    {    
     html: 'Child Panel 4',   
    }, 
    {   
     html: 'Child Panel 5',   
    } 
] 
     }); 

containerPanel1.draggable; 

var containerPanel2 = Ext.create('Ext.panel.Panel', { 
renderTo: Ext.getBody(), 
draggable: { 
     insertProxy: false, 

     startDrag: function(e) { 
     var el = Ext.get(this.getEl()); 
     el.dd = new Ext.dd.DDProxy(el.dom.id, 'group'); 
     this.x = el.getLeft(true); 
     this.y = el.getTop(true);   
     },   
      afterDrag: function(e) { 
      this.x = el.getLeft(true); 
      this.y = el.getTop(true); 
      this.fireEvent('itemdrag', this); 

     } 
    }, 
width:400, 
height:550, 
layout: 'column', 
bodyStyle:{'background-color':'green'}, 
margin:'30 0 0 20', 
suspendLayout: true , 
defaults :{ 
xtype: 'panel', 
margin:'30 0 0 0', 
height: 300, 
columnWidth: 0.2 
}, 
items: [   
    {  
     html: 'Child Panel 1',    
    }, 
    {    
     html: 'Child Panel 2',   
    }, 
    {   
     html: 'Child Panel 3',   
    }, 
    {    
     html: 'Child Panel 4',   
    }, 
    {   
     html: 'Child Panel 5', 

    } 
] 
    }); 
    containerPanel2.draggable; 
    containerPanel2.getEl().hide(); 

     Ext.create('Ext.container.Viewport', { 
    layout: 'column', 
    items: [containerPanel1,containerPanel2,button] 

    }); 


    } 
    });   

請幫me..Thanks

Answer 1

我只是建立一個類似的項目，所以這裏是一個示例代碼片段，您可以使用。請注意，您可以更改面板的數量和順序，代碼仍然可以工作。點擊處理程序只是首先查找可見面板，然後根據方向嘗試向前或向後。

Ext.define('MyApp.view.MyViewport1', { 
    extend: 'Ext.container.Viewport', 

    id: 'switchPanels', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'panel', 
        height: 100, 
        html: 'this is panel 1', 
        title: 'My Panel A' 
       }, 
       { 
        xtype: 'panel', 
        height: 100, 
        hidden: true, 
        html: 'this is panel 2', 
        title: 'My Panel B' 
       }, 
       { 
        xtype: 'panel', 
        height: 100, 
        hidden: true, 
        html: 'this is panel 3', 
        title: 'My Panel C' 
       }, 
       { 
        xtype: 'container', 
        switchPanel: function(forward) { 
         var p = Ext.ComponentQuery.query('panel(true){isVisible()}')[0]; // visible panel 
         var n = forward ? p.nextSibling('panel(true)') : p.previousSibling('panel(true)'); // closest sibling 
         if (n) { // don't let go past the last one 
          p.hide(); 
          n.show(); 
         } 
         else { 
          console.log("can't go past the " + (forward ? 'end' : 'beginning')); 
         } 
        }, 
        id: 'buttons', 
        items: [ 
         { 
          xtype: 'button', 
          handler: function(button, event) { 
           button.up().switchPanel(false); 
          }, 
          text: 'Prev' 
         }, 
         { 
          xtype: 'button', 
          handler: function(button, event) { 
           button.up().switchPanel(true); 
          }, 
          text: 'Next' 
         } 
        ] 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 

}); 

Answer 2

您需要使用卡（嚮導）佈局這一點。請參閱下面的simple sample example。

我確定這會幫助你解決你的問題。

var active = 0; 
var main = Ext.create('Ext.panel.Panel', { 
    renderTo: Ext.getBody(), 
    width: 200, 
    height: 200, 
    layout: 'card', 
    tbar: [{ 
     text: 'Next', 
     handler: function(){ 
      var layout = main.getLayout(); 
      ++active; 
      layout.setActiveItem(active); 
      active = main.items.indexOf(layout.getActiveItem()); 
     } 
    }], 
    items: [{ 
     title: 'P1' 
    }, { 
     title: 'P2' 
    }, { 
     title: 'P3', 
     listeners: { 
      beforeactivate: function(){ 
       return false; 
      } 
     } 
    }] 
}); 

請在下面的鏈接指卡（嚮導）的佈局。

http://docs.sencha.com/extjs/4.2.0/#!/example/layout-browser/layout-browser.html 

感謝