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