2

我想将旧样式的程序构建字符串注入在标准 ExtJS 4 MVC 应用程序中创建的 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()，因为 fillDiv() 的父文件在 index.html 的 javascript 包含中，但是很好，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 回答