Shulou(Shulou.com)06/02 Report--

This article mainly introduces what Ext.Loader is in Ext.js4.2.1, it has certain reference value, interested friends can refer to it, I hope you can learn a lot after reading this article, let's take you to know it.

One: description

Ext.Loader is the core of dynamic loading in ExtJs4+. It is generally used through Ext.require (). Ext.Loader supports both synchronous and asynchronous loading.

Two: asynchronous loading

Advantages:

1. Support for cross-domain access

two。 Do not need a Web server, you can run programs such as file://path/to/your/index.html through the file system protocol

3. Easy to debug

Disadvantages:

1. Dependencies must be specified in advance

How to use it:

/ / aliases for a single class

Ext.require ('widget.window')

/ / single class

Ext.require ('Ext.window.Window')

/ / multiple aliases, multiple classes

Ext.require (['widget.window',' layout.border', 'Ext.data.Connection'])

Ext.require (['widget.*',' layout.*', 'Ext.data.*'])

Three: synchronous loading

Advantages:

1.1. You don't need to specify the dependency in advance, you just need to include ext-all.js in advance

Disadvantages:

1. Not easy to debug unless you use Firebug

two。 Cross-domain requests cannot be made because the limit of XHR must be the same domain name

3. Must have a Web server

How to use it: you can follow a simple rule to instantiate objects with Ext.create instead of new keyword

For example: Ext.create ('widget.window', {...}); or Ext.create (' Ext.window.Window', {})

In addition, the mixed loading mode can be used to combine the advantages of synchronous and asynchronous loading.

Four: parameters

1.disableCaching:Boolean

Disable caching of js files. Default is true.

If we set DisableCaching equal to true, we automatically add a parameter with the DisableCachingParam attribute value as the parameter name when sending the request (default is "_ dc" if the DisableCachingParam value is empty), and the value is the current time parameter. This works effectively with the cache.

2.disableCachingParam:String

Cache parameter, default is'_ dc'

3.enabled:Boolean

Whether to enable dynamic loading. Default is false.

Such as:

Ext.Loader.setConfig ({

Enabled: true

Paths: {/ / 'class name prefix': 'path'

'App.ux': 'lib'

}

});

Ext.require (['App.ux.MusicWin']); / /' lib/MusicWin.js' is automatically loaded by matching.

Notice that inside Ext.require is the MusicWin.js file under App.ux.

MusicWin.js Code:

Ext.define ('App.ux.MusicWin', {

Play: function () {

Alert ('playing...')

}

});

4.garbageCollect:Boolean

5.paths:Ojbect

Mapping between files and namespaces

Five: methods

1.addClassPathMappings

ClassName:path mappings is similar to the parameter paths

2.exclude

Its abbreviated form is Ext.exclude.

3.require

Its abbreviated form is Ext.require.

4.onReady (fn,scope,withDomReady)

Add a listener that executes the contents of the listener when all the scripts are loaded.

5.setConfig (config)

Set the parameters for loader, which should be called after ext-*.js is loaded and before Ext.onReady.

Such as: Ext.Loader.setConfig ({

Enabled: true

DisableCaching: true

Paths: {

'Ext.ux.desktop':'.. / desktoplib'

"MyDesktop":'.. / modules'

}

});

Ext.require (...)

Var startup

Ext.onReady (function () {

Startup = Ext.create ("MyDesktop.StartUp")

Startup.loadDesktop ()

});

6.syncRequire (expressions, [fn], [scope], [excludes])

Load the specified classes and their direct dependencies synchronously, and execute the corresponding drop function when the loading is complete.

Alias syncRequire.

Thank you for reading this article carefully. I hope the article "what is Ext.Loader in Ext.js4.2.1" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.