2

標準のExtJS4MVCアプリケーションで作成されたDIV要素に、古いスタイルの手続き的に構築された文字列を挿入したいのですが、動的ローディングを活用する方法に頭を悩ませています。

したがって、「createHtml.js」というJavaScriptファイルにこの関数が単独で含まれているとします。

function fillDiv(strDivName)    {
    document.getElementById(strDivName).innerHTML = "<h1>TEST</h1>";
}

他の場所では、MVC ExtJS 4アプリで（したがって、app.js内で参照されるオブジェクトでは、次のようになります。

myPanel = Ext.create('Ext.panel.Panel', {
    title: 'Map',
    html: '<div style="width:100%; height:100%" id="map"></div>'
});

index.htmlページに、createHtml.jsへの参照を含めます。私のapp.jsファイルには、次のようなものがあります。

( function() {
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            MyJive: 'media/js/ext/MyCom/MyJive',
        }
    });
    Ext.onReady( function() {
        var urlparams = document.URL.split('?')[1];
        var param = Ext.urlDecode( urlparams ? urlparams : '' );
        var pcard = Ext.create( 'MyJive.view.MyUI',{
            param1 : param.param1,
            param2: param.param2
        });
        Ext.create( 'Ext.container.Viewport', {
            layout: 'fit',
            items: [pcard]
        });
    });
})();

MyUIのどこかにあるボタンにリスナーを接続して呼び出すfillDiv('map');と、Uncaught ReferenceError: fillDiv is not definedエラーが発生します。

fillDivを独自のファイル（createHtml.js）ではなくMyUI.js（上記のpcardで参照）に配置すると、私は金色になります。ですから、div idが間違っていたり、風変わりで無効なinnerHTML値があったりするような、非常に愚かな問題ではないことを私は知っています。

fillDiv（）の親ファイルはindex.htmlのjavascriptインクルードにあるため、アプリはfillDiv（）について知っていると思いますが、createHtml.jsは動的に読み込まれていません。私はそれを持っていると思います。

しかし、私の関数がその範囲外のファイルに存在することをapp.jsに伝えるにはどうすればよいですか？

（現在、「IRL」では、fillDivがOpenLayersを介して複雑なHTMLを作成しているため、ExtJSフォームに埋め込まれたparam1とparam2で識別されるマップを表示できますが、この単純なセットアップで試してみました。私が間違っていることを理解してください。）

編集： index.htmlを追加しました。createHtml.jsにはfillDiv()メソッドが含まれています。マップを取得するDIVはindex.htmlにないことに注意してください。これも、ExtJSパネルで定義されています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>My Project</title>
        <link rel="stylesheet" type="text/css" 
                href="media/js/ext/ext-4.0/css/ext-all.css" />
        <link rel="stylesheet" type="text/css"
                href="media/js/ext/MyCom/MyJive/css/main.css" />

        <script type="text/javascript" 
                src="media/js/ext/MyCom/MyJive/createHtml.js"></script>
        <script type="text/javascript" 
                src="media/js/ext/MyCom/MyJive/OpenLayers-2.11/OpenLayers.js"></script>
        <script type="text/javascript" 
                src="media/js/ext/ext-4.0/ext-all-debug-w-comments.js"></script>

        <script type="text/javascript"
                src="media/js/ext/MyCom/MyJive/app.js"></script>
    </head>
    <body>
        <div id="divParent"></div>
    </body>
</html>

編集： app.jsの追加：

( function() {
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            MyProj: 'media/js/ext/MyCom/MyProj',
            OpenLayers: 'media/js/ext/MyCom/MapJive/OpenLayers-2.11',
            MyComExt  : 'media/js/ext/MyCom/MyComExt'
        }
    });
    Ext.onReady( function() {
        var urlparams = document.URL.split('?')[1];
        var param = Ext.urlDecode( urlparams ? urlparams : '' );
        var pcard = Ext.create( 'MyProj.view.MyProj',{
            param1: param.p1,
            param2: param.p2
        });
        Ext.create( 'Ext.container.Viewport', {
            layout: 'fit',
            items: [pcard]
        });
    });
})();
4

1 に答える 1

2

コメントだけ残しますが、そのための十分なポイントがありません。

createHtml.js および app.js ファイルのインポートに index.html ファイルが含まれていませんでした。しかし、最初に確認することは、createHtml.js インポートが app.js の上に配置されていることです。

于 2012-05-26T17:42:41.943 に答える