Ext.onReady() vs $(document).ready()

Question

Whats the difference? I have on $(document).ready function which should check if extjs is loaded but the main problem is extjs does not load on time and things inside $(document

Answer 1

Ext.onReady() and $(document).ready() have nothing to do about either library being loaded as the current accepted answer suggests.

According to the documentation both are about the DOM being loaded and ready.

Documentation

• Ext JS: https://docs.sencha.com/extjs/6.7.0/modern/Ext.html#method-onReady
• jQuery: https://api.jquery.com/ready/

An Answer to Your Case

It's possible that you're loading the Ext JS resource after your script fires, but jQuery is already loaded above your script. Thus using jQuery to wait until the DOM is loaded guarantees that the DOM has been loaded and thus by then Ext JS has also been loaded.

If you try to invert them and us Ext JS first you'll likely have an error.

According to the documentation they're doing the same thing so you shouldn't need to nest them

A Fix for this Scenario

If you are loading your resources like so:

1. jQuery
2. Your Script
3. Ext JS

It would be best to load them in this order:

1. jQuery and/or Ext JS
   • Order shouldn't matter as they can stand by themselves without requiring one or the other
2. Your Script

Additional Explanation

Due to how the DOM is loaded and parsed by the time it reads your script it guarantees that jQuery and Ext JS are available. This is why you can reference their libraries in your script; you're not waiting for them to load they're already there and available to be used which is why you can call them and use their ready calls.

You need to use the ready event of one of the libraries to guarantee that all elements are loaded into the DOM and available to be accessed. You also shouldn't try to add anything to the DOM until it's ready although you can append to current elements that have been loaded above your element/script tag. It's just best practice to not touch the DOM until it's finished loading.

Additional Explanation Nobody Asked For

Answer 2

They both check for when the DOM is ready. If you need Ext to be loaded when using jQuery, try to invert the logic (don't know if it will work, haven't tried).

Ext.onReady(function() {
    $(document).ready(function() {
        Ext.create('Ext.Button', {...});
    });
});

Another StackOverflow question on this subject: Extjs + jQuery together

Answer 3

No they're not the same, the first one will proc when your jQuery library is loaded, the Ext.onReady(.. will proc when your ExtJS library is loaded.

If you want to combine them you could do something like this:

var extReady = false;
var jQueryReady = false;

var librariesReady = function () {
    if (jQueryReady && extReady) {
        //They're both ready
    }
};

$(document).ready(function () {
    jQueryReady = true;
    librariesReady();    
});
Ext.onReady(function () {
    extReady = true;
    librariesReady();
});