-Ext.ux.Spotlight = function(config){
- Ext.apply(this, config);
-}
-Ext.ux.Spotlight.prototype = {
- active : false,
- animate : true,
- duration: .25,
- easing:'easeNone',
-
- // private
- animated : false,
-
- createElements : function(){
- var bd = Ext.getBody();
-
- this.right = bd.createChild({cls:'x-spotlight'});
- this.left = bd.createChild({cls:'x-spotlight'});
- this.top = bd.createChild({cls:'x-spotlight'});
- this.bottom = bd.createChild({cls:'x-spotlight'});
-
- this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
+Ext.define('Ext.ux.Spotlight', {
+ extend: 'Object',
+
+ /**
+ * @private
+ * The baseCls for the spotlight elements
+ */
+ baseCls: 'x-spotlight',
+
+ /**
+ * @cfg animate {Boolean} True to animate the spotlight change
+ * (defaults to true)
+ */
+ animate: true,
+
+ /**
+ * @cfg duration {Integer} The duration of the animation, in milliseconds
+ * (defaults to 250)
+ */
+ duration: 250,
+
+ /**
+ * @cfg easing {String} The type of easing for the spotlight animatation
+ * (defaults to null)
+ */
+ easing: null,
+
+ /**
+ * @private
+ * True if the spotlight is active on the element
+ */
+ active: false,
+
+ /**
+ * Create all the elements for the spotlight
+ */
+ createElements: function() {
+ var body = Ext.getBody();
+
+ this.right = body.createChild({
+ cls: this.baseCls
+ });
+ this.left = body.createChild({
+ cls: this.baseCls
+ });
+ this.top = body.createChild({
+ cls: this.baseCls
+ });
+ this.bottom = body.createChild({
+ cls: this.baseCls
+ });
+
+ this.all = Ext.create('Ext.CompositeElement', [this.right, this.left, this.top, this.bottom]);