EXTJS 6.5: файл внешних свойств с переменными для использования в Index.html - PullRequest
Новая
       6

EXTJS 6.5: файл внешних свойств с переменными для использования в Index.html

0 голосов
/ 03 июля 2019

У меня есть приложение EXTJS6.5.Я хочу использовать переменные в моем index.html, которые приходят из файла свойств.Однако изменение значений этих переменных не должно требовать новой сборки приложения.Это означает, что переменная может быть изменена в случае необходимости (без необходимости создания кода extjs).

Может кто-нибудь помочь с этим?

Я уже прошел через другие потоки, где индекс.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>

Будет ли это работать так?Или, пожалуйста, предложите какой-нибудь лучший способ сделать это ... большое спасибо.

1 Ответ

0 голосов
/ 04 июля 2019

Учитывая 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-07-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');
    }
});`
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...