PDA

View Full Version : Add code to onReady



drunkmoose
4 Jun 2014, 8:16 AM
Hello

I'm am trying to execute a jQuery script which tries to get its hand on a DOM element before it is actually rendered by ExtJS, which results in an error.

In the 3.x days, I would simply put that bit of code in Ext.onReady, but in MVC 4.2, I'm not sure where to do that.

I have tried using "load" from Ext.app.Application, with no luck. Anyways, if I put an alert() in that event, the popup seems to appear before the page is fully loaded (at least at quick glance).

Here's what I need to execute only when ExtJS has fully done rendering the viewport and all its elements:



$(document).ready(function () {
$('#navmenu-body li.has-sub>a').on('click', function () {
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});


$('#navmenu-body>ul>li.has-sub>a').append('<span class="holder"></span>');


(function getColor() {
var r, g, b;
var j = $('#navmenu-body');
var textColor = $('#navmenu-body').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#navmenu-body>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#navmenu-body>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else {
$('#navmenu-body>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#navmenu-body>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
})();


function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;


if (max == min) {
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return l;
}
});

Phil Guerrant
4 Jun 2014, 10:05 AM
try listening for the "render" event of the Component. That is the earliest point at which you can be sure the Component's element is availiable

aleenashes
4 Jun 2014, 10:10 AM
it very nice great

drunkmoose
4 Jun 2014, 10:14 AM
Thanks Phil. That gets rid of the error but the code doesn't do what it's supposed to be doing at this point.There seems to be an issue that jQuery is confused at what is $(document) once ExtJS is done rendering it. It seems the event is not hooked on the "right" document, or body.

I'll explain why I initially thought this was a load order problem.

What I did for the moment is put back the jQuery code in a package instead of running it in a listener of some sorts.

It runs fine in Chrome, but fails in IE9. It is the selector for #navmenu-body that fails (which is an ExtJS component).

It seems to be trying to get the element before it is rendered, but only so in IE9.

So am I wondering, is this a jQuery problem with IE9 ? ExtJS render order different in IE9 than in Chrome ? The answer would be simple if I did not have ExtJS rendering the document...

What do you think ?