X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/source/spotlight-example.html diff --git a/docs/source/spotlight-example.html b/docs/source/spotlight-example.html new file mode 100644 index 00000000..f89b2863 --- /dev/null +++ b/docs/source/spotlight-example.html @@ -0,0 +1,80 @@ + +
+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); +});+ + \ No newline at end of file