Question

我有一个EXTJS6.5应用程序。我想在index.html中使用来自属性文件的变量。但是，更改这些变量的值不需要重新构建应用程序。这意味着可以根据需要更改该变量（无需构建extjs代码）。

有人可以帮忙吗？

我已经遍历了其他线程，其中index.html可以具有占位符，但似乎没有具体的示例。

这是我的属性文件（Runtime.js）

{
    "appUrl": "http://myappurl.com",
    "appId": "10"
}

Then I want to use these variables in my index.html as such:

这是我的index.html

<!DOCTYPE HTML>
<html lang="fr">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <meta name="description" content="MyApp">

    <title>MyApp</title>

    <link rel="icon" type="image/png" href="myicon.png">
    <link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>

<body>
    <div id="myapp-app-loading">
        <div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>

    <script type="text/javascript">
        var Ext = Ext || {};
        Ext.beforeLoad = function (tags) {
            Ext.manifest = 'classic'; // this name must match a build profile name
        };
    </script>

    <script src="Runtime.js"></script>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
    <script src="{{Runtime.appUrl}}/configuration/MyConstants.js"></script>
    <script src="{{Runtime.appUrl}}/resources/mycharts/mycharts.js"></script>
    <script src="{{Runtime.appUrl}}/resources/ckeditor/ckeditor.js"></script>
</body>

</html>

这样会行吗？或者请提出任何更好的方法来实现此目标。非常感谢您。

Answer 1

给出Runtime.js文件有语法错误。无效的javascript文件。

Runtime.js应该是：

window.appUrl="http://myappurl.com";
window.appId="10";

您可以在脚本块（而不是html块）中使用window.appUrl / window.appid之类的变量。

您可以采取解决方法来解决此问题：您可以从Runtime.js生成包含。示例：

index.html

<!DOCTYPE HTML>
<html lang="fr">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
    <meta name="description" content="MyApp">

    <title>MyApp</title>

    <link rel="icon" type="image/png" href="myicon.png">
    <link rel="stylesheet" href="resources/dist/myapp-resources.min.css">
</head>

<body>
    <div id="myapp-app-loading">
        <div class="myapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
    </div>

    <script type="text/javascript">
        var Ext = Ext || {};
        Ext.beforeLoad = function (tags) {
            Ext.manifest = 'classic'; // this name must match a build profile name
        };
    </script>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="6d7f3123-ffca-44d3-8ed2-14fr2w6be804" type="text/javascript" src="bootstrap.js"></script>
    <script src="Runtime.js"></script>
</body>

</html>

Runtime.js

window.appUrl="http://myappurl.com";
window.appId="10";

var script = document.createElement("script")
script.type = "text/javascript";
script.src = window.appUrl+"/configuration/MyConstants.js";

var script2 = document.createElement("script")
script2.type = "text/javascript";
script2.src = window.appUrl+"/resources/mycharts/mycharts.js";

var script3 = document.createElement("script")
script3.type = "text/javascript";
script3.src = window.appUrl+"/resources/ckeditor/ckeditor.js";

document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script2);
document.getElementsByTagName("body")[document.getElementsByTagName("body").length-1].appendChild(script3);

更新了2019-07-17：

如果要在应用程序启动之前需要脚本，则必须在app.json块的js中添加对脚本的引用（这不能完成，因为您要个性化脚本源）。 / p>

第二个选项是在app.js中进行更改，您可以像这样操作Ext.Loader.loadScript：

Ext.Loader.loadScript({
    url: 'my.js',
    onLoad: function(){
        Ext.application({
            name: 'Fiddle',
            extend: 'Fiddle.Application',
            autoCreateViewPort: false
        });
    },
    onError: function(){
        console.log('error');
    }
});`

EXTJS 6.5：带有要在Index.html中使用的变量的外部属性文件

1 个答案: