JavaScript DHTML/Ext JS/Cardlayout

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Cardlayout&oldid=2325»