Files
Ext.Loader is the heart of the new dynamic dependency loading capability in Ext JS 4+. It is most commonly used\nvia the Ext.require shorthand. Ext.Loader supports both asynchronous and synchronous loading\napproaches, and leverage their advantages for the best development flow. We'll discuss about the pros and cons of each approach:
\n\nAdvantages:
\n\nfile://path/to/your/index\n.html)Disadvantages:
\n\n// Syntax\nExt.require({String/Array} expressions);\n\n// Example: Single alias\nExt.require('widget.window');\n\n// Example: Single class name\nExt.require('Ext.window.Window');\n\n// Example: Multiple aliases / class names mix\nExt.require(['widget.window', 'layout.border', 'Ext.data.Connection']);\n\n// Wildcards\nExt.require(['widget.*', 'layout.*', 'Ext.data.*']);\n// Syntax: Note that it must be in this chaining format.\nExt.exclude({String/Array} expressions)\n .require({String/Array} expressions);\n\n// Include everything except Ext.data.*\nExt.exclude('Ext.data.*').require('*');\n\n// Include all widgets except widget.checkbox*,\n// which will match widget.checkbox, widget.checkboxfield, widget.checkboxgroup, etc.\nExt.exclude('widget.checkbox*').require('widget.*');\nAdvantages:
\n\nDisadvantages:
\n\nThere'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({...});\n\nExt.create('Ext.window.Window', {}); // Same as above, using full class name instead of alias\n\nExt.widget('window', {}); // Same as above, all you need is the traditional `xtype`\nBehind the scene, Ext.ClassManager will automatically check whether the given class name / alias has already\n existed on the page. If it's not, Ext.Loader will immediately switch itself to synchronous mode and automatic load the given\n class and all its dependencies.
\n\nIt has all the advantages combined from asynchronous and synchronous loading. The development flow is simple:
\n\nExt.Loader will automatically fetch all dependencies on demand as they're needed during run-time. For example:
\n\nExt.onReady(function(){\n var window = Ext.widget('window', {\n width: 500,\n height: 300,\n layout: {\n type: 'border',\n padding: 5\n },\n title: 'Hello Dialog',\n items: [{\n title: 'Navigation',\n collapsible: true,\n region: 'west',\n width: 200,\n html: 'Hello',\n split: true\n }, {\n title: 'TabPanel',\n region: 'center'\n }]\n });\n\n window.show();\n})\n[Ext.Loader] Synchronously loading 'Ext.window.Window'; consider adding Ext.require('Ext.window.Window') before your application's code\nClassManager.js:432\n[Ext.Loader] Synchronously loading 'Ext.layout.container.Border'; consider adding Ext.require('Ext.layout.container.Border') before your application's code\nSimply copy and paste the suggested code above Ext.onReady, i.e:
Ext.require('Ext.window.Window');\nExt.require('Ext.layout.container.Border');\n\nExt.onReady(...);\nEverything should now load via asynchronous mode.
\n\nIt's important to note that dynamic loading should only be used during development on your local machines.\nDuring production, all dependencies should be combined into one single JavaScript file. Ext.Loader makes\nthe whole process of transitioning from / to between development / maintenance and production as easy as\npossible. Internally Ext.Loader.history maintains the list of all dependencies your application\nneeds in the exact loading sequence. It's as simple as concatenating all files in this array into one,\nthen include it on top of your application.
\n\nThis process will be automated with Sencha Command, to be released and documented towards Ext JS 4 Final.
\nAppends current timestamp to script files to prevent caching.
\nDefaults to: true
The get parameter name for the cache buster's timestamp.
\nDefaults to: '_dc'
Whether or not to enable the dynamic dependency loading feature.
\nDefaults to: false
True to prepare an asynchronous script tag for garbage collection (effective only\nif preserveScripts is false)
\nDefaults to: false
The mapping from namespaces to file paths
\n\n{\n 'Ext': '.', // This is set by default, Ext.layout.container.Container will be\n // loaded from ./layout/Container.js\n\n 'My': './src/my_own_folder' // My.layout.Container will be loaded from\n // ./src/my_own_folder/layout/Container.js\n}\nNote that all relative paths are relative to the current HTML document.\nIf not being specified, for example, Other.awesome.Class\nwill simply be loaded from ./Other/awesome/Class.js
Defaults to: {'Ext': '.'}
False to remove and optionally garbage-collect asynchronously loaded scripts,\nTrue to retain script element for browser debugger compatibility and improved load performance.
\nDefaults to: true
millisecond delay between asynchronous script injection (prevents stack overflow on some user agents)\n'false' disables delay but potentially increases stack load.
\nDefaults to: false
An array of class names to keep track of the dependency loading order.\nThis is not guaranteed to be the same everytime due to the asynchronous\nnature of the Loader.
\nMaintain the list of files that have already been handled so that they never get double-loaded
\nMaintain the list of files that have already been handled so that they never get double-loaded
\nFlag indicating whether there are still files being loaded
\nDefaults to: false
Contains classes referenced in uses properties.
Contains classes referenced in uses properties.
Maintain the queue for all dependencies. Each item in the array is an object of the format:
\n\n{\n requires: [...], // The required classes for this queue item\n callback: function() { ... } // The function to execute when all classes specified in requires exist\n}\nMaintain the list of listeners to execute when all required scripts are fully loaded
\nMaintain the list of listeners to execute when all required scripts are fully loaded
\nMap of fully qualified class names to an array of dependent classes.
\nMap of fully qualified class names to an array of dependent classes.
\nThe number of scripts loading via loadScript.
\nDefaults to: 0
Sets a batch of path entries
\na set of className: path mappings
\nthis
\nTurns on or off the \"cache buster\" applied to dynamically loaded scripts. Normally\ndynamically loaded scripts have an extra query parameter appended to avoid stale\ncached scripts. This method can be used to disable this mechanism, and is primarily\nuseful for testing. This is done using a cookie.
\nExplicitly exclude files from being loaded. Useful when used in conjunction with a broad include expression.\nCan be chained with more require and exclude methods, eg:
Ext.exclude('Ext.data.*').require('*');\n\nExt.exclude('widget.button*').require('widget.*');\nExt.exclude is alias for exclude.
\nobject contains require method for chaining
Translates a className to a file path by adding the\nthe proper prefix and converting the .'s to /'s. For example:
\n\nExt.Loader.setPath('My', '/path/to/My');\n\nalert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/path/to/My/awesome/Class.js'\nNote that the deeper namespace levels, if explicitly set, are always resolved first. For example:
\n\nExt.Loader.setPath({\n 'My': '/path/to/lib',\n 'My.awesome': '/other/path/for/awesome/stuff',\n 'My.awesome.more': '/more/awesome/path'\n});\n\nalert(Ext.Loader.getPath('My.awesome.Class')); // alerts '/other/path/for/awesome/stuff/Class.js'\n\nalert(Ext.Loader.getPath('My.awesome.more.Class')); // alerts '/more/awesome/path/Class.js'\n\nalert(Ext.Loader.getPath('My.cool.Class')); // alerts '/path/to/lib/cool/Class.js'\n\nalert(Ext.Loader.getPath('Unknown.strange.Stuff')); // alerts 'Unknown/strange/Stuff.js'\npath
\nLoads the specified script URL and calls the supplied callbacks. If this method\nis called before Ext.isReady, the script's load will delay the transition\nto ready. This can be used to load arbitrary scripts that may contain further\nExt.require calls.
\nRefresh all items in the queue. If all dependencies for an item exist during looping,\nit will execute the callback and call refreshQueue again. Triggers onReady when the queue is\nempty
\nLoads all classes by the given names and all their direct dependencies; optionally executes\nthe given callback function when finishes, within the optional scope.
\n\nExt.require is alias for require.
\nSet the configuration for the loader. This should be called right after ext-(debug).js\nis included in the page, and before Ext.onReady. i.e:
\n\n<script type=\"text/javascript\" src=\"ext-core-debug.js\"></script>\n<script type=\"text/javascript\">\n Ext.Loader.setConfig({\n enabled: true,\n paths: {\n 'My': 'my_own_path'\n }\n });\n</script>\n<script type=\"text/javascript\">\n Ext.require(...);\n\n Ext.onReady(function() {\n // application code here\n });\n</script>\nRefer to config options of Ext.Loader for the list of possible properties
\nThe config object to override the default values
\nthis
\nSets the path of a namespace.\nFor Example:
\n\nExt.Loader.setPath('Ext', '.');\nSee flexSetter
\nSee flexSetter
\nthis
\nSynchronously loads all classes by the given names and all their direct dependencies; optionally\nexecutes the given callback function when finishes, within the optional scope.
\n\nExt.syncRequire is alias for syncRequire.
\n