sencha-touch - SenchaTouch2で外部JavaScriptをロードする適切な方法は何ですか

Question

私の開発では、サードパーティのJavaScriptを含める必要があります。money.jsのように（http://josscrowcroft.github.com/money.js/）

それを達成するための最良の「クリーン」/「適切な」方法は何ですか？index.htmlに含めるだけですか？

Answer 1

いいえ。ファイルに追加のjavascriptファイルを直接追加しないでくださいindex.html。これは推奨される方法ではありません（機能する場合もあります）。

代わりに、このようにしてください、

• に次の行を含めますindex.html。microloaderは、sencha sdkに同梱されているフォルダーであり、主に、、およびの3つのファイルが含まれてdevelopment.jsおりproduction.js、testing.jsそれぞれが独自の目的で使用されます。

<script id = "microloader" type = "text / javascript" src = "../../ microloader / development.js"> </ script>

• 次に、<appname>フォルダ内に、という名前のファイルが必要になりますapp.json。このようになります..

{
    "name": "Sencha",

     // All javascript files go here ...
    "js": [
        {
            "path": "../../sencha-touch-all-debug.js"
        },
        {
            "path": "app.js",
            "update": "delta"
        },
        { 
            "path": "http://josscrowcroft.github.com/money.js/",
            "update": "delta"  
        }
    ],
    "css": [
        {
            "path": "../../resources/css/sencha-touch.css",
            "update": "delta"
        },
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],

    .....
    .....
    .....
 }

Answer 2

Sencha Cmdを使用している場合、index.htmlは次のようになります。

<!-- The line below must be kept intact for Sencha Command to build your application -->
<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

したがって、app.jsonを変更した後、アプリを更新する必要があります。

sencha app refresh

Answer 3

純粋なJavaScriptが私のためにトリックをしました。このコードブロックを起動関数に含めました。

var scriptTag = document.createElement('script');
scriptTag.src = 'specify the path here...';
document.body.appendChild(scriptTag);

scriptTagは、インデックスファイルの本文に追加されます。

Answer 4

外部JavaScriptライブラリがローカルの場合、以下はExtJS5.0.0で機能しました。編集後、「煎茶アプリビルド」を実行します

app.jsonの3つのJSON要素に変更を加えます。（1）js（2）css（3）リソース

{
    "name": "Sencha",

     // All javascript files go here ...
"js": [
    {
        "path": "app.js",
        "bundle": true
    },
    {
        "path": "leaflet/leaflet.js",
        "bundle": true
    }
],
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    },
    {
        "path": "leaflet/leaflet.css",
        "bootstrap": true
    }
],

    .....
/**
 * Extra resources to be copied along when build
 */
"resources": [""leaflet/leaflet.js","leaflet/leaflet.css"

]、...........}