Results 1 to 4 of 4

Thread: Add code to onReady

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    119
    Answers
    4

    Default Add code to onReady

    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:

    Code:
    $(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;
        }
    });

  2. #2
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352
    Answers
    32

    Default

    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
    Phil Guerrant
    Ext JS - Development Team

  3. #3
    Sencha User
    Join Date
    Jun 2014
    Location
    dubai
    Posts
    1

    Default

    it very nice great

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    119
    Answers
    4

    Default

    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 ?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •