title: How to make panels to navigate left and right on click of button in Sencha ExtJs
body: <p>I have created 3 panels,2 buttons(Prev,next) in Extjs and added to viewport.
  At a time only one panel should visible (by default first panel).
  On click of next button it should display next panel,then if i click on "prev" button it should display the previous panel.</p>
  
  <p>Now i have wrote a code for panels and its working as ,panels are not navigating to left and right properly.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>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]
  
      }); 
  
  
      }
       });          
  </code></pre>
  
  <p>Please help me..Thanks</p>