Geekly Articles each Day
📜 ⬆️ ⬇️

Automatic download of ExtJS library on demand.

Today we will talk about the possibility of dynamic preloading of the library on demand. Initially, to use the framework, you need to connect the style file first, then the adapter, which implements the basic functionality, and if you use another AJAX library as a basis, first and its distribution. And only then the main ExtJS file, or its debug version at the development stage. Of course, combining all files into one, gzip compression and other techniques will help reduce download time. But…

But what if the task is quite narrow, for example, I ran into it when some website uses ExtJS to provide a form for adding and editing materials. At the same time, the editing process is quite rare, in the sense that not every user will constantly use it, besides this, working with the site in the mode without registration differs only in the absence of the possibility of editing. Downloading all the files at once, and this is almost 600 Kb, even if a carefully assembled version is specially designed for the project, taking into account its needs, it is quite expensive, and I would not like to load them to all users.

The result was the following picture. All visitors who, without registration, search bots and others, are loaded with standard pages that do not use any editing features, respectively, these files are not even connected there. As a result, we have lightweight pages suitable for viewing and indexing.

In the case of a registered user, the picture changes slightly. He already needs to make the information editing tools available, but it’s likely that he will not use them, so we don’t intend to download the entire ExtJS library at this stage. And do the following.
')
Initially, a style file from the ExtJS distribution is added to the page. From scripts, we use a library build using jQuery and a special adapter. Here we will combine these two files into one, first a minified version of jQuery, then Ext-jquery-adapter. And this script is uploaded to the page. The compressed version of CSS from ExtJS takes about 40 Kb (especially if it is adjusted for the needs of the project), and the minified script that combines the necessary libraries is 73 Kb, and this is all without taking into account the possibilities of gzip-compression.

As a result, we get on the page, firstly, the main features from jQuery, and, most importantly, the very minimal core from ExtJS, literally the basic functions and capabilities of the Ext root class and its extensions for standard JavaScript objects (for example, String, Array and Date when using ExtJS get some "bonuses").

If you look at the library code, you can see that the main file, ext-all.js, contains all the other components, while it extends the already loaded Ext class. And this means that it can be loaded at an arbitrary moment after the entire page is loaded and after its execution by the browser, we will receive on the fly all the capabilities we need. The main thing that is needed is the pre-loaded adapter and the initialized base for the script.

And now let's do library uploading. As long as functions from ExtJS are not available to us, we use the jQuery functionality to initialize it, namely the built-in ability to load arbitrary JS code on the page and execute the transferred Callback function after successful data processing. In previous versions, jquery could only be loaded from the current domain, and cross-domain loading is now allowed.

Additionally, we need to create a flag variable to notify the application whether the full library has been loaded or only its core - using ExtJS is difficult to know, because the library is loaded, however, all its basic features are not yet available. Therefore, we create a global flag variable to store information about the state of the library.

By the way, you can immediately configure Ext, for example, set options for built-in garbage collectors and others, such as the path for the BLANK_IMAGE_URL constants, these kernel features are available immediately after initialization. If you need to make additional settings, for example, initialization of the cookie manager, then I recommend putting all this into a separate function, which we will then automatically call after loading.

And now the final, which is quite simple. The _loadExtJS_andRun function accepts a single parameter, a callback function, which must be executed after the library is loaded. First we check our flag - if ExtJS is already loaded, skip all the actions and immediately call a callback. If not, we use the bootloader from jQuery, which after successful loading will first call our initialization function (if it is, in the example I initialize the State Manager to work with the cookie and QuikTip right in the code, but it’s better to issue it as a function), and then callback.

Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  1. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  2. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  3. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  4. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  5. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  6. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  7. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  8. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  9. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  10. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  11. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  12. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  13. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  14. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  15. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  16. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  17. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  18. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  19. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  20. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  21. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  22. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  23. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  24. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  25. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  26. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  27. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
  28. Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .
Ext.BLANK_IMAGE_URL = '/inc/extjs/resources/images/default/s.gif' ; Ext.enableGarbageCollector = true ; // _isLoadedExtJS = false ; function _loadExtJS_andRun(callback) { if (_isLoadedExtJS == false ) // { // JQuery $.getScript( '/inc/extjs/ext-all.js' , function (data, textStatus){ if (textStatus == 'success' ) { _isLoadedExtJS = true ; Ext.state.Manager.setProvider( new Ext.state.CookieProvider({ path: "/" , expires: new Date( new Date().getTime()+(1000*60*60*24*30)) })); Ext.QuickTips.init(); // callback(); } }); } else { callback(); } } * This source code was highlighted with Source Code Highlighter .


For real use, it is better to supplement this code with a reaction to the option when the download failed for some reason, for example, to display a message to the user.

Since loading a large library can take some time, I recommend using a preloader and showing the user that the application is doing something, although this will only be the first time accessing functionality that requires ExtJS features.

The easiest application is to click on the image we want to display the Ext.Msg.alert dialog box, but we don’t know, and our click handling function doesn’t want (and doesn’t have to) whether ExtJS is available. Therefore, in the handler, we specify it as a callback function for our loader, which independently checks the availability of the library, is responsible for its correct initialization and the execution of our function only when everything is ready for this.

  1. style = "cursor: pointer;"
  2. onclick = "javascript: void _loadExtJS_andRun (function () { Ext.Msg.alert ('Alert', 'Hello, World!');});"
  3. src = "inc / images / people.png"
  4. border = "0"
  5. alt = "Your Blog Tagline"
* This source code was highlighted with Source Code Highlighter .

Source: https://habr.com/ru/post/52908/

More articles:


All Articles