PDA

View Full Version : Safari refreshes page after creating/destroying an Ext.window.Window twice



WillBill
5 Jun 2012, 6:47 AM
Hello,


I have a window that contains a colorpicker. Everytime someone clicks on a specific div to edit a color
I create a new window and show it. This works just fine in IE, Chrome and FireFox. But Safari reloads
the page after a second attempt.

If I hide it, it all works fine. But destroying it leads to a refresh after 2 attempts.

Does anyone have any idea what causes this behaviour?


Willie

mankz
5 Jun 2012, 12:27 PM
Please post a runnable test case to reproduce it.

WillBill
5 Jun 2012, 10:44 PM
REQUIRED INFORMATION

Ext version tested:

Ext 4.0.7
Browser versions tested against:

IE8
IE9
FF 12
Chrome 19
Safari 5.1.6
Description:

Window containing color picker opens fine the first 1 or 2 times, after that Safari refreshes the page when you try to open it. All other browsers i've tested don't show this type of behaviour.
It seems moving around the pickers around results in the same behaviour
Steps to reproduce the problem:

open/close color picker window a few times, page refresh should happen after 2 tries (just now it took me 8 open/closes to reproduce)
move around the color pickers
The result that was expected:

color picker window opening without a refresh
The result that occurs instead:

Safari refreshes the whole page
Safari crashes
Test Case:


Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {
id: '',
height: 300,
width: 400,
renderTo: Ext.getBody(),
items: [
{
xtype : 'button',
text : 'color picker',
handler : function() {
var win = Ext.create('Ext.ux.ColorPicker', {

}).show();

}
}
]
});

Ext.define('Ext.ux.ColorPicker', {
extend: 'Ext.window.Window',
id: 'colorpicker',
constrain: true,
height: 500,
width: 700,
layout: 'hbox',
myCircle: null,
initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
width: 274,
height: 270,
style: {
textAlign: 'center'
},
id: 'gradientContainer',
items: [
{
xtype: 'image',
width: 256,
height: 256,
id: 'gradientImg',
style: {
marginTop: '5px'
},
src: 'images/color_picker_gradient.png',
listeners: {
afterrender: function(c) {
c.el.on('mousedown', function(event, el, obj) {
Ext.getCmp('picker-circle').setPagePosition(event.getPageX() - 5, event.getPageY() - 7);
}, this , {
});
}
}
},
{
xtype: 'image',
id: 'picker-circle',
src: 'images/color_picker_circle.gif',
draggable: {
constrain: true,
constrainTo: 'gradientContainer',
delegate: 'gradientContainer'
},
floating: true,
listeners: {
move: function(e, left, top, obj) {
var arrowPos = Ext.getCmp('picker-arrow').y;
var val = Math.round((e.x -4) * (100/255));
var sat = Math.round(e.y * (100/255));
var hue = Math.round(arrowPos * (360/255));


var rgb = me._hsvToHex(hue, sat, val);
me._rgbToHex(rgb[0], rgb[1], rgb[2]);
}
}
}
]
},
{
xtype: 'container',
width: 19,
height: 264,
id: 'hueContainer',
items: [
{
xtype: 'image',
width: 19,
height: 256,
style: {
marginLeft: '25px',
marginTop: '4px'
},
src: 'images/color_picker_bar.png',
listeners: {
afterrender: function(c) {
c.el.on('mousedown', function(event,el,obj) {
Ext.getCmp('picker-arrow').setPagePosition(event.x, event.getPageY() - 5);
}, this , {

});
}
}
},
{
xtype: 'image',
id: 'picker-arrow',
src: 'images/color_picker_arrows.gif',
shadow: false,
style: {
marginLeft: '17px'
},
draggable: {
constrain: true,
constrainTo: 'hueContainer',
delegate: 'hueContainer'
},
floating: true,
listeners: {
move: function(e, left, top) {
var hue = Math.round((360/255) * e.y);
Ext.getCmp('huefield').setValue();
var sat = Ext.getCmp('satfield').getValue();
var val = Ext.getCmp('valfield').getValue();
me._hsvToHex(hue, sat, val);

var rgb = me._hsvToHex(hue, 100, 100);
Ext.getCmp('gradientImg').el.dom.style.background = "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";

}
}
}
]
},
{
xtype: 'container',
id: 'currentColor',
style: {
width: '50px',
height: '50px',
marginLeft: '50px',
background: '#FFFFFF'
}
},
{
xtype: 'container',
layout: 'vbox',
top: 50,
width: 350,
height: 400,
defaults: {
xtype: 'textfield',
labelAlign: 'top',
readOnly: true,
style: {
marginLeft: '50px'
}
},
items: [
{
fieldLabel: 'Hex',
id: 'hexfield'
},
{
fieldLabel: 'Red',
id: 'redfield'
},
{
fieldLabel: 'Green',
id: 'greenfield'
},
{
fieldLabel: 'Blue',
id: 'bluefield'
},
{
fieldLabel: 'Hue',
id: 'huefield'
},
{
fieldLabel: 'Saturation',
id: 'satfield'
},
{
fieldLabel: 'Value',
id: 'valfield'
}
]
}
]
});
me.callParent(arguments);
me.setTitle('Color Picker');
},
listeners: {
afterrender: function() {
this._addPickers();
}
},

_addPickers: function() {
Ext.getCmp('picker-circle').show();
Ext.getCmp('picker-arrow').show();
Ext.getCmp('picker-arrow').setPosition(0, 0);
},

_rgbToHex: function(r, g, b)
{
console.log('red: ' + r + ' green: ' + g + ' blue: ' + b);
var red = r.toString(16);
var green = g.toString(16);
var blue = b.toString(16);

if(red.length == 1)
red = '0' + red;
if(green.length == 1)
green = '0' + green;
if(blue.length == 1)
blue = '0' + blue;


Ext.getCmp('hexfield').setValue('#' + red + green + blue);
Ext.getCmp('redfield').setValue(r);
Ext.getCmp('greenfield').setValue(g);
Ext.getCmp('bluefield').setValue(b);

Ext.getCmp('currentColor').el.dom.style.background = '#' + red + green + blue;
},

_hsvToHex: function(h, s, v) {

if(isNaN(h))
h = 0;
if(h >= 360)
h = 359.99;

Ext.getCmp('huefield').setValue(h);
Ext.getCmp('satfield').setValue(s);
Ext.getCmp('valfield').setValue(v);

var r, g, b;
var i;
var f, p, q, t;


h = Math.max(0, Math.min(360, h));
s = Math.max(0, Math.min(100, s));
v = Math.max(0, Math.min(100, v));


s /= 100;
v /= 100;

if(s == 0) r = g = b = v;


h /= 60;
i = Math.floor(h);
f = h - i;
p = v * (1 - s);
q = v * (1 - s * f);
t = v * (1 - s * (1 - f));



switch(i) {
case 0:
r = v;
g = t;
b = p;
break;

case 1:
r = q;
g = v;
b = p;
break;

case 2:
r = p;
g = v;
b = t;
break;

case 3:
r = p;
g = q;
b = v;
break;

case 4:
r = t;
g = p;
b = v;
break;

default:
r = v;
g = p;
b = q;
}

return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
});
});


HELPFUL INFORMATION

Operating System:

Mac OS X

WillBill
5 Jun 2012, 10:51 PM
I've just edited my test case a bit, i'm beginning to think this has nothing to do with the window
itself but with my color picker hogging all the memory. Not sure as to why this happens just in
Safari