将函数中配置的 html 添加到 ExtJS 4 MVC
Posted
技术标签:
【中文标题】将函数中配置的 html 添加到 ExtJS 4 MVC【英文标题】：Adding html configured in a function into an ExtJS 4 MVC 【发布时间】：2012-05-25 23:16:36 【问题描述】：我想将旧样式、程序构建的字符串注入在标准 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]
);
);
)();
【问题讨论】：
请与您分享 index.html 文件并参考 createHtml.js @Macy 完成。这有帮助吗？ 您可以在父范围内查看和调用函数。只是我看不到你在哪里调用fillDiv() 函数。您还可以测试console.log(window.fillDiv) 是否已定义
app.js 创建一个创建 GUI 的对象。 UI 创建的一部分是 fillDiv 调用。如果我从包含的文件中调用 fillDiv，则什么也没有。如果我调用 fillDiv2（我放入目标文件的相同函数），它就可以工作。我将添加函数调用。
【参考方案1】：
我只想发表评论，但我没有足够的积分。
您没有在导入 createHtml.js 和 app.js 文件时包含 index.html 文件。但我要检查的第一件事是您的 createHtml.js 导入位于 app.js 之上。
【讨论】：
看起来我还好。希望有一秒钟这是一个愚蠢的问题。 你走在正确的轨道上。长话短说，文件包含不正确。 Excellent debug steps suggested here 我在 sencha.com 上问过的地方。 是的，这些都是很棒的调试步骤，我一直都在使用它们。当某些事情无法正常工作时，我首先尝试记录它周围的所有内容，这足以解决许多问题。 是的，通常我更聪明，但我让 ExtJS MVC 加载器让我看不到好的、标准的 JS 调试，让我觉得它应该复杂得多。愚蠢的。以上是关于将函数中配置的 html 添加到 ExtJS 4 MVC的主要内容，如果未能解决你的问题，请参考以下文章