Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used -via the Ext.require shorthand. Ext.Loader supports both asynchronous and synchronous loading -approaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:
- -Advantages:
- -file://path/to/your/index
-.html)Disadvantages:
- -// Syntax
-Ext.require({String/Array} expressions);
-
-// Example: Single alias
-Ext.require('widget.window');
-
-// Example: Single class name
-Ext.require('Ext.window.Window');
-
-// Example: Multiple aliases / class names mix
-Ext.require(['widget.window', 'layout.border', 'Ext.data.Connection']);
-
-// Wildcards
-Ext.require(['widget.*', 'layout.*', 'Ext.data.*']);
-// Syntax: Note that it must be in this chaining format.
-Ext.exclude({String/Array} expressions)
- .require({String/Array} expressions);
-
-// Include everything except Ext.data.*
-Ext.exclude('Ext.data.*').require('*');Â
-
-// Include all widgets except widget.checkbox*,
-// which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.
-Ext.exclude('widget.checkbox*').require('widget.*');
-Advantages:
- -Disadvantages:
- -There's one simple rule to follow: Instantiate everything with Ext.create instead of the new keyword
Ext.create('widget.window', { ... }); // Instead of new Ext.window.Window({...});
-
-Ext.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias
-
-Ext.widget('window', {}); // Same as above, all you need is the traditional `xtype`
-Behind the scene, Ext.ClassManager will automatically check whether the given class name / alias has already - existed on the page. If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given - class and all its dependencies.
- -It has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
- -dependencies on demand as they're needed during run-time. For example: ###
- -Ext.onReady(function(){
- var window = Ext.createWidget('window', {
- width: 500,
- height: 300,
- layout: {
- type: 'border',
- padding: 5
- },
- title: 'Hello Dialog',
- items: [{
- title: 'Navigation',
- collapsible: true,
- region: 'west',
- width: 200,
- html: 'Hello',
- split: true
- }, {
- title: 'TabPanel',
- region: 'center'
- }]
- });
-
- window.show();
-})
-[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code
-ClassManager.js:432
-[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code
-Simply copy and paste the suggested code above Ext.onReady, i.e:
Ext.require('Ext.window.Window');
-Ext.require('Ext.layout.container.Border');
-
-Ext.onReady(...);
-Everything should now load via asynchronous mode.
- -It's important to note that dynamic loading should only be used during development on your local machines. -During production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes -the whole process of transitioning from / to between development / maintenance and production as easy as -possible. Internally Ext.Loader.history maintains the list of all dependencies your application -needs in the exact loading sequence. It's as simple as concatenating all files in this array into one, -then include it on top of your application.
- -This process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
-Appends current timestamp to script files to prevent caching -Defaults to true
-Appends current timestamp to script files to prevent caching -Defaults to true
-The get parameter name for the cache buster's timestamp. -Defaults to '_dc'
-The get parameter name for the cache buster's timestamp. -Defaults to '_dc'
-Whether or not to enable the dynamic dependency loading feature -Defaults to false
-Whether or not to enable the dynamic dependency loading feature -Defaults to false
-The mapping from namespaces to file paths
- -{
- 'Ext': '.', // This is set by default, Ext.layout.container.Container will be
- // loaded from ./layout/Container.js
-
- 'My': './src/my_own_folder' // My.layout.Container will be loaded from
- // ./src/my_own_folder/layout/Container.js
-}
-Note that all relative paths are relative to the current HTML document.
-If not being specified, for example, Other.awesome.Class
-will simply be loaded from ./Other/awesome/Class.js
An array of class names to keep track of the dependency loading order. -This is not guaranteed to be the same everytime due to the asynchronous -nature of the Loader.
-Explicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.
-Can be chained with more require and exclude methods, eg:
Ext.exclude('Ext.data.*').require('*');
-
-Ext.exclude('widget.button*').require('widget.*');
-object contains require method for chaining
Get the config value corresponding to the specified name. If no name is given, will return the config object
-Get the config value corresponding to the specified name. If no name is given, will return the config object
-The config property name
-Translates a className to a file path by adding the -the proper prefix and converting the .'s to /'s. For example:
- -Ext.Loader.setPath('My', '/path/to/My');
-
-alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'
-Note that the deeper namespace levels, if explicitly set, are always resolved first. For example:
- -Ext.Loader.setPath({
- 'My': '/path/to/lib',
- 'My.awesome': '/other/path/for/awesome/stuff',
- 'My.awesome.more': '/more/awesome/path'
-});
-
-alert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'
-
-alert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'
-
-alert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'
-
-alert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'
-path
-Add a new listener to be executed when all required scripts are fully loaded
-Add a new listener to be executed when all required scripts are fully loaded
-The function callback to be executed
-The execution scope (this) of the callback function
Whether or not to wait for document dom ready as well
-Loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when -finishes, within the optional scope. This method is aliased by Ext.require for convenience
-Can either be a string or an array of string
-(Optional) The callback function
-(Optional) The execution scope (this) of the callback function
(Optional) Classes to be excluded, useful when being used with expressions
-Set the configuration for the loader. This should be called right after ext-core.js -(or ext-core-debug.js) is included in the page, i.e:
- -<script type="text/javascript" src="ext-core-debug.js"></script>
-<script type="text/javascript">
- Ext.Loader.setConfig({
- enabled: true,
- paths: {
- 'My': 'my_own_path'
- }
- });
-<script>
-<script type="text/javascript">
- Ext.require(...);
-
- Ext.onReady(function() {
- // application code here
- });
-</script>
-Refer to configs for the list of possible properties
-The config object to override the default values in config
-this
-Synchronously loads all classes by the given names and all their direct dependencies; optionally executes the given callback function when finishes, within the optional scope. This method is aliased by Ext.syncRequire for convenience
-Can either be a string or an array of string
-(Optional) The callback function
-(Optional) The execution scope (this) of the callback function
(Optional) Classes to be excluded, useful when being used with expressions
-