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
+