Ext JS JavaScript DHTML



Hello World Window






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