Cardlayout window : Cardlayout « Ext JS « JavaScript DHTML

Cardlayout window
  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {


var handleNav = function(btn) {
  var activeItem   = myWin.layout.activeItem;
  var index        = myWin.items.indexOf(activeItem);
  var numItems     = myWin.items.getCount() - 1;
  var indicatorEl  = Ext.getCmp('indicator').el;
  
  if (btn.text == 'Forward' && index < numItems) {
    myWin.layout.setActiveItem(index + 1);
  }
  else if (btn.text == 'Back' && index > 0) {
    myWin.layout.setActiveItem(index - 1);
  }
  
  indicatorEl.update((index + 1) + ' of ' + (numItems + 1));
}


var myWin = new Ext.Window({
  height       : 200,
  width        : 300,
  autoScroll   : true,
  id           : 'myWin',
  title        : 'A Window with a Card layout',
  layout       : 'card',
  activeItem   : 0,
  items        : [
    {
      title : '1',
      html  : '1'
    },
    {
      title : '2',
      html  : '2'
    },    
    {
      title : '3',
      html  : '3'
    }
  ],
  bbar : [
    {
      text    : 'Back',
      handler : handleNav
    },
    '-',
    {
      text    : 'Forward',
      handler : handleNav
    },
    '->',
    {
      xtype  : 'box',
      id     : 'indicator',
      style  : 'margin-right: 5px',
      autoEl :  {
        tag  : 'div',
        html : '1 of 3'
      }
    }
   
  ]
  
});

myWin.show();



});
</script> 
<div id='div1'>asdf</div>
</body>
</html>
Cardlayout window : Cardlayout « Ext JS « JavaScript DHTML

Related examples in the same category
