Path settings for dynamic loading in ExtJS 4

In the Loader object, dynamic loading uses the getPath method to obtain the download path. The Code is as follows:
1 getPath: function (className ){
2 var path =,
3 paths = this. config. paths,
4 prefix = this. getPrefix (className );
5
6 if (prefix. length> 0 ){
7 if (prefix === className ){
8 return paths [prefix];
9}
10
11 path = paths [prefix];
12 className = className. substring (prefix. length + 1 );
13}
14
15 if (path. length> 0 ){
16 path + = /;
17}
18
19 return path. replace (//. // g,/) + className. replace (/./g, "/") +. js;
20 },
21
According to the definition of the paths variable, the default path is stored in the paths object of the config object of the Loader object. The default configuration is as follows:
1 paths :{
2 Ext :.
3}
4
That is to say, the default Ext loading path is the root directory.
The code first uses the getPrefix method to obtain the class name prefix. The Code is as follows:
1 getPrefix: function (className ){
2 var paths = this. config. paths,
3 prefix, deepestPrefix =;
4
5 if (paths. hasOwnProperty (className )){
6 return className;
7}
8
9 for (prefix in paths ){
10 if (paths. hasOwnProperty (prefix) & prefix +. === className. substring (0, prefix. length + 1 )){
11 if (prefix. length> deepestPrefix. length ){
12 deepestPrefix = prefix;
13}
14}
15}
16
17 return deepestPrefix;
18 },
19
The code will check whether the paths object contains an attribute named "attribute name". If yes, it indicates that the class has a direct path and can be directly returned. For example, a class named "My. App. User" is defined. The following definition exists in the paths object:
1 My. App. User: ../app/user. js
This indicates that the "My. App. User" class does not need to calculate its download path. You can download the file directly according to the definition in the paths object.
If there is no direct path, first find the prefix with the path, for example, "My. app. user class. If only the path definition of "My" exists in the paths object, the prefix "My" is returned ". If the paths object already has the path definitions of "My" and "My. App", the prefix "My. App" is returned ".
If none of the above exists, a null string is returned.
Return to the getPath method. If the returned prefix is not a Null String, check whether the prefix is of the same type. If the prefix is the same, retrieve the path from the paths object and return it directly. Otherwise, the prefix path is taken out and the prefix of the class name is removed.
Then, determine whether the path exists. If it does not exist, add a slash (/) to the path.
Finally, convert the class name to the file name with ". js" and add the path to return. Note that if the class name contains ".", it will convert "." to "/", that is, it will be considered as part of the path.
To preset the loading path, you can use the setPath method of the Loader object. The code is simple, that is, copying the members of the configuration object to the paths path is not described here.
Open the API documentation of ExtJS 4 in the browser and enter the following command in the Firebug console:
1 Ext. Loader. setPath ({
2 "My": "./app ",
3 "My. app": "./app ",
4 "Ext":./lib/src
5 })
6 console. dir (Ext. Loader. config. paths );
7
Command uses the setPath method to preset the loading paths of "My", "My. app", and "Ext.
After running, you can see the following output in the console:
1 Ext "./lib/src /"
2 My "./app"
3 My. app "./app /"
4
This setting is based on the general project structure. In general, the ext-all.js is loaded, so you don't need to set the Ext directory, but if you like dynamic loading all, you can also set according to the sample code, put the source code of ExtJS In the src directory of lib. In a general project, a custom class can be placed under the app directory, and The namespace of the class name can be set at will, as long as the path is specified in the paths object. For example, "My. base, My. app. user and My. app. product, and use "Ext. ux. for Ext plug-ins or extensions such as plugin, the path obtained using getPath will be:
1./app/base. js
2./app/user. js
3./app/product. js
4./lib/scr/ux/plugin. js
5
The problem now is that the plug-in should also be placed under the src directory. For convenience, you can define a directory for the plug-in, for example:
1 Ext. Loader. setPath ("Ext. ux", "./lib/ux ");
In this way, you can put the plug-in the ux directory under lib.
After the above settings, you can use the Ext. require method before the OnReady method to load the library file smoothly. For example:
1 Ext. Loader. setConfig ({en