PDA

View Full Version : Spotlight problem using with Windows



talha06
16 Aug 2012, 5:57 AM
Hello everyone,

I'm facing problem while using Spotlight (http://docs.sencha.com/ext-js/4-1/#!/example/core/spotlight.html) extension with windows. I added listeners 'show', 'close', 'resize', 'move' to show/hide/synchronize spot with the state of window. I didn't have any problems while using Spotlight with windows at Ext JS 3.x versions. It just works for first time; when I try to open any other window after closing, it gives an error like this:


Uncaught TypeError: Cannot call method 'getBoundingClientRect' of null
ext-all-debug.js:11373 (http://localhost:9090/DMS/extjs/ext-all-debug.js)

Here's what I've tried:


Ext.define('MyApp.view.base.BaseWindow', {
extend : 'Ext.window.Window',
alias : 'widget.basewindow',
initComponent: function() {


var me = this;


this.addListener('show', function() {
if(spot && spot.el) {
spot.show(me.getId());
} else {
spot = Ext.create('Ext.ux.Spotlight', {
easing: 'easeOut',
duration: 300
});
spot.show(me.getId());
}
});
this.addListener('hide', function() {
if(spot && spot.el) {
spot.hide();
}
});
this.addListener('close', function() {
if(spot && spot.el) {
spot.hide();
}
});
this.addListener('resize', function() {
if(spot && spot.el) {
spot.syncSize();
}
});
this.addListener('move', function() {
if(spot && spot.el) {
spot.syncSize();
}
});


this.callParent(arguments);
}
});

var win = Ext.create(''MyApp.view.base.BaseWindow', {
title : 'A window',
width: 400,
height: 300,
modal: true
});
var btn = Ext.create('Ext.button.Button', {
text : 'Show',
handler : function() {
win.show();
}
});


CSS for Spotlight:


.x-spotlight {
background-color: #CCCCCC;
font-size: 0;
height: 0;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 0;
z-index: 8999;
}