我想弄清楚如何在允许用户获取实际应用程序之前加载app.js.我试图做的是在我的所有类Ext.defines触发之前加载用户的配置文件…我想这样做的原因是因为Ext.defines实际上依赖于用户配置中的值.例如,在Ext.define中,我可以将title属性设置为从此全局用户配置var中提取.不,我不想要经历并改变所有这些属性以使用initComponent ……这可能需要相当长的时间.
相反,我想要做的是加载配置,然后让Ext.defines运行,但我需要Ext JS和我定义的一个类在其他类之前加载.这可能吗？我一直在研究Sencha Cmd的设置,但是我一直都没有成功实现这个功能.我正在玩bootstrap.manifest.exclude：“loadOrder”属性,它加载了classic.json,并没有定义我的类,但不幸的是,这也没有完全加载Ext JS,所以Ext.onReady不能使用…也不能使用我的模型加载配置.
我在下面有一个非常高级的例子(这里是Fiddle).
Ext.define('MyConfigurationModel', {
extend: 'Ext.data.Model',
singleton: true,
fields: [{
name: 'testValue',
type: 'string'
}],
proxy: {
type: 'ajax',
url: '/configuration',
reader: {
type: 'json'
}
}
});
// Pretend this would be the class we're requiring in our Main file
Ext.define('MyApp.view.child.ClassThatUsesConfiguration', {
extend: 'Ext.panel.Panel',
alias: 'widget.classThatUsesConfiguration',
/* We get an undefined value here because MyConfigurationModel hasn't
* actually loaded yet, so what I need is to wait until MyConfigurationModel
* has loaded, and then I can include this class, so the define runs and
* adds this to the prototype... and no, I don't want to put this in
* initComponent, as that would mean I would have to update a ton of classes
* just to accomplish this */
title: MyConfigurationModel.get('testValue')
});
Ext.define('MyApp.view.main.MainView', {
extend: 'Ext.Viewport',
alias: 'widget.appMain',
requires: [
'MyApp.view.child.ClassThatUsesConfiguration'
],
items: [{
xtype: 'classThatUsesConfiguration'
}]
});
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
mainView: 'MyApp.view.main.MainView',
launch: function() {
console.log('launched');
}
});
/* In app.js... right now, this gets called after classic.json is downloaded and
* after our Ext.defines set up, but I basically want this to run first before
* all of my classes run their Ext.define */
Ext.onReady(function() {
MyConfigurationModel.load({
callback: onl oadConfigurationModel
})
});
function onl oadConfigurationModel(record, operation, successful) {
if (successful) {
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application'
});
}
else {
// redirect to login page
}
}
解决方法:
我将其称为“拆分构建”,因为它从Ext.app.Application类中删除了Ext.container.Viewport类的依赖关系树.所有Ext JS应用程序都有一个设置为主视图的视口.通过将所有需要的应用程序核心声明移动到viewport类,应用程序可以从应用程序类显式加载视口,并且可以将生成构建配置为输出两个单独的文件app.js和viewport.js.然后,在加载应用程序的核心之前,可以进行任意数量的操作.
// The app.js file defines the application class and loads the viewport
// file.
Ext.define('MyApp.Application', {
extend: 'Ext.app.Application',
requires: [
// Ext JS
'Ext.Loader'
],
appProperty: 'application',
name: 'MyApp',
launch: function() {
// Perform additional operations before loading the viewport
// and its dependencies.
Ext.Ajax.request({
url: 'myapp/config',
method: 'GET',
success: this.myAppRequestSuccessCallback
});
},
myAppRequestSuccessCallback: function(options, success, response) {
// Save response of the request and load the viewport without
// declaring a dependency on it.
Ext.Loader.loadScript('classic/viewport.js');
}
});
–
// The clasic/viewport.js file requires the viewport class which in turn
// requires the rest of the application.
Ext.require('MyApp.container.Viewport', function() {
// The viewport requires all additional classes of the application.
MyApp.application.setMainView('MyApp.container.Viewport');
});
在生产中构建时,视口及其依赖项将不会包含在app.js中,因为它未在requires语句中声明.将以下内容添加到应用程序的build.xml文件中,以将视口及其所有依赖项编译为viewport.js.方便的是,开发和生产文件结构保持不变.
<target name="-after-js">
<!-- The following is derived from the compile-js target in
.sencha/app/js-impl.xml. Compile the viewport and all of its
dependencies into viewport.js. Include in the framework
dependencies in the framework file. -->
<x-compile refid="${compiler.ref.id}">
<![CDATA[
union
-r
-class=${app.name}.container.Viewport
and
save
viewport
and
intersect
-set=viewport,allframework
and
include
-set=frameworkdeps
and
save
frameworkdeps
and
include
-tag=Ext.cmd.derive
and
concat
-remove-text-references=${build.remove.references}
-optimize-string-references=${build.optimize.string.references}
-remove-requirement-nodes=${build.remove.requirement.nodes}
${build.compression}
-out=${build.framework.file}
${build.concat.options}
and
restore
viewport
and
exclude
-set=frameworkdeps
and
exclude
-set=page
and
exclude
-tag=Ext.cmd.derive,derive
and
concat
-remove-text-references=${build.remove.references}
-optimize-string-references=${build.optimize.string.references}
-remove-requirement-nodes=${build.remove.requirement.nodes}
${build.compression}
-out=${build.out.base.path}/${build.id}/viewport.js
${build.concat.options}
]]>
</x-compile>
<!-- Concatenate the file that sets the main view. -->
<concat destfile="${build.out.base.path}/${build.id}/viewport.js" append="true">
<fileset file="classic/viewport.js" />
</concat>
</target>
<target name="-before-sass">
<!-- The viewport is not explicitly required by the application,
however, its SCSS dependencies need to be included. Unfortunately,
the property required to filter the output, sass.name.filter, is
declared as local and cannot be overridden. Use the development
configuration instead. -->
<property name="build.include.all.scss" value="true"/>
</target>
这个特定的实现将框架依赖性保存在他们自己的文件framework.js中.这被配置为app.json文件中输出声明的一部分.
"output": {
...
"framework": {
// Split the framework from the application.
"enable": true
}
}
https://docs.sencha.com/extjs/6.2.0/classic/Ext.app.Application.html#cfg-mainView
https://docs.sencha.com/extjs/6.2.0/classic/Ext.container.Viewport.html
https://docs.sencha.com/cmd/guides/advanced_cmd/cmd_build.html#advanced_cmd-_-cmd_build_-_introduction
原文地址：https://codeday.me/bug/20190611/1217198.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。