时间戳

首页 > 解决方案 > EXTJS 6.5：带有要在 Index.html 中使用的变量的外部属性文件

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

问题描述

我有一个 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>

这会这样工作吗？或者请提出任何更好的方法来做到这一点..非常感谢。

标签： extjs

解决方案

给定Runtime.js文件有语法错误。不是有效的 JavaScript 文件。

Runtime.js应该：

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

您可以在脚本块中使用这些变量，例如window.appUrl/ window.appid，而不是在 html 块中。

您可以采取解决方法来解决问题：您可以从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 年 7 月 17 日更新：

如果您想在应用程序启动之前需要脚本，您必须app.json在js块中添加对脚本的引用（因为您想要个性化脚本的来源，所以不能这样做）。

第二个选项是改变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');
    }
});`

推荐阅读