Dynamic Package Loading
Ext JS 6.5 and Sencha Cmd 6.5 introduced some amazing new capabilities
Sencha Cmd 6.5 has supported the concept of packages for several years and large-scale applications. Sencha Cmd then builds all of these pieces into your application. Now we can use these packages from Sencha Cmd 6.5 onwards in a whole new way dynamically.
Upto now we are adding the packages names in "requires" array in your app.json.
requires:[
'dashboard'
]
For dynamic package loading, simply move packages from requires to "uses" array and add a
"package-loader" in requires.
requires:[
'package-loader'
],
uses:[
'dashboard'
]
After adding these package changes, for build the application we need to do the following commands.
For Dev:
Sencha app build --dev --uses
For Prod:
Sencha app build --prod --uses
For Particular package:
Sencha app build --dev --uses=dashboard
--uses for to fully build the application and all of its external packages.
Using dynamic package loading can be a real time time saver for users, No longer to wait entire application to load, to load what ever they needed. It also time saving for the developers no need to build the entire application.
In main controller we need to add the ext loader class.
Source: Sencha
Ext JS 6.5 and Sencha Cmd 6.5 introduced some amazing new capabilities
Sencha Cmd 6.5 has supported the concept of packages for several years and large-scale applications. Sencha Cmd then builds all of these pieces into your application. Now we can use these packages from Sencha Cmd 6.5 onwards in a whole new way dynamically.
Upto now we are adding the packages names in "requires" array in your app.json.
requires:[
'dashboard'
]
For dynamic package loading, simply move packages from requires to "uses" array and add a
"package-loader" in requires.
requires:[
'package-loader'
],
uses:[
'dashboard'
]
After adding these package changes, for build the application we need to do the following commands.
For Dev:
Sencha app build --dev --uses
For Prod:
Sencha app build --prod --uses
For Particular package:
Sencha app build --dev --uses=dashboard
--uses for to fully build the application and all of its external packages.
Using dynamic package loading can be a real time time saver for users, No longer to wait entire application to load, to load what ever they needed. It also time saving for the developers no need to build the entire application.
In main controller we need to add the ext loader class.
requires: [
'Ext.Package'
],
package loading will be.
routes: { ':type': { before: 'loadPackage', action: 'showView' } }, loadPackage: function (type, action) { var view = this.getView(), pkg = this.getPackageForType(type); if (!pkg || Ext.Package.isLoaded(pkg)) { action.resume(); } else { view.setMasked({ message: 'Loading Package...' }); Ext.Package.load(pkg).then(function () { view.setMasked(null); action.resume(); }); } },
Source: Sencha
