git.ithinksw.org
/
extjs.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git]
/
examples
/
core
/
spotlight-example.js
diff --git
a/examples/core/spotlight-example.js
b/examples/core/spotlight-example.js
index
840e06f
..
2cfc695
100644
(file)
--- a/
examples/core/spotlight-example.js
+++ b/
examples/core/spotlight-example.js
@@
-1,77
+1,101
@@
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-Ext.onReady(function(){
+Ext.require(['Ext.panel.Panel', 'Ext.layout.container.Table']);
- var spot = new Ext.ux.Spotlight({
+Ext.onReady(function() {
+ //Create the spotlight component
+ var spot = Ext.create('Ext.ux.Spotlight', {
easing: 'easeOut',
easing: 'easeOut',
- duration:
.3
+ duration:
300
});
});
- var DemoPanel = Ext.extend(Ext.Panel, {
+ //Create a DemoPanel which is the base for each panel in the example
+ Ext.define('DemoPanel', {
+ extend: 'Ext.panel.Panel',
+
title: 'Demo Panel',
frame: true,
width: 200,
height: 150,
html: 'Some panel content goes here!',
title: 'Demo Panel',
frame: true,
width: 200,
height: 150,
html: 'Some panel content goes here!',
- bodyStyle: 'padding:10px 15px;',
+ bodyStyle: 'padding:5px;',
+
+ /**
+ * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument
+ */
+ toggle: function(on) {
+ var btns = this.dockedItems.items[1],
+ btn = btns.items.items[1];
- toggle: function(on){
- this.buttons[0].setDisabled(!on);
+ if (btn) {
+ btn.setDisabled(!on);
+ }
}
});
var p1, p2, p3;
}
});
var p1, p2, p3;
- var updateSpot = function(id){
- if(typeof id == 'string'){
+
+ /**
+ * Method which changes the spotlight to be active on a spefied panel
+ */
+ var updateSpot = function(id) {
+ if (typeof id == 'string') {
spot.show(id);
spot.show(id);
- }
else if (!id && spot.active)
{
+ }
else if (!id && spot.active)
{
spot.hide();
}
spot.hide();
}
- p1.toggle(id==p1.id);
- p2.toggle(id==p2.id);
- p3.toggle(id==p3.id);
+
+ p1.toggle(id == p1.id);
+ p2.toggle(id == p2.id);
+ p3.toggle(id == p3.id);
};
};
-
new Ext.Panel(
{
+
Ext.createWidget('panel',
{
renderTo: Ext.getBody(),
renderTo: Ext.getBody(),
+
layout: 'table',
id: 'demo-ct',
border: false,
layout: 'table',
id: 'demo-ct',
border: false,
+
layoutConfig: {
columns: 3
},
layoutConfig: {
columns: 3
},
- items: [p1 = new DemoPanel({
+
+ items: [
+ p1 = Ext.create('DemoPanel', {
id: 'panel1',
buttons: [{
text: 'Next Panel',
id: 'panel1',
buttons: [{
text: 'Next Panel',
- handler: updateSpot.createDelegate(this, ['panel2'])
+ disabled: true,
+ handler: function() {
+ updateSpot('panel2');
+ }
}]
}]
- }),
- p2 = new DemoPanel({
+ }), p2 = Ext.create('DemoPanel', {
id: 'panel2',
buttons: [{
text: 'Next Panel',
id: 'panel2',
buttons: [{
text: 'Next Panel',
- handler: updateSpot.createDelegate(this, ['panel3'])
+ disabled: true,
+ handler: function() {
+ updateSpot('panel3');
+ }
}]
}]
- }),
- p3 = new DemoPanel({
+ }), p3 = Ext.create('DemoPanel', {
id: 'panel3',
buttons: [{
text: 'Done',
id: 'panel3',
buttons: [{
text: 'Done',
- handler: updateSpot.createDelegate(this, [false])
+ disabled: true,
+ handler: function() {
+ updateSpot(false);
+ }
}]
})]
});
}]
})]
});
- new Ext.Button({
+ //The start button, which starts everything
+ Ext.create('Ext.button.Button', {
text: 'Start',
renderTo: 'start-ct',
text: 'Start',
renderTo: 'start-ct',
- handler: updateSpot.createDelegate(this, ['panel1'])
+ handler: function() {
+ updateSpot('panel1');
+ }
});
});
-
- updateSpot(false);
-});
\ No newline at end of file
+});