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