JavaScript DHTML/Ext JS/Cardlayout

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

Cardlayout window

   <source lang="html4strict">

<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>

asdf

</body> </html> 


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