Spotlight Demo: restrict input to a particular element by masking all other page content
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
<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>
<script language="javascript" src="ext-3.0.0/examples/ux/Spotlight.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var spot = new Ext.ux.Spotlight({
easing: 'easeOut',
duration: .3
});
var DemoPanel = Ext.extend(Ext.Panel, {
title: 'Demo Panel',
frame: true,
width: 200,
height: 150,
html: 'Some panel content goes here!',
bodyStyle: 'padding:10px 15px;',
toggle: function(on){
this.buttons[0].setDisabled(!on);
}
});
var p1, p2, p3;
var updateSpot = function(id){
if(typeof id == 'string'){
spot.show(id);
}else if (!id && spot.active){
spot.hide();
}
p1.toggle(id==p1.id);
p2.toggle(id==p2.id);
p3.toggle(id==p3.id);
};
new Ext.Panel({
renderTo: Ext.getBody(),
layout: 'table',
id: 'demo-ct',
border: false,
layoutConfig: {
columns: 3
},
items: [p1 = new DemoPanel({
id: 'panel1',
buttons: [{
text: 'Next Panel',
handler: updateSpot.createDelegate(this, ['panel2'])
}]
}),
p2 = new DemoPanel({
id: 'panel2',
buttons: [{
text: 'Next Panel',
handler: updateSpot.createDelegate(this, ['panel3'])
}]
}),
p3 = new DemoPanel({
id: 'panel3',
buttons: [{
text: 'Done',
handler: updateSpot.createDelegate(this, [false])
}]
})]
});
new Ext.Button({
text: 'Start',
renderTo: 'start-ct',
handler: updateSpot.createDelegate(this, ['panel1'])
});
updateSpot(false);
});
</script>
<div id="start-ct"></div>
</body>
</html>
Related examples in the same category