Я хочу ввести старый стиль, процедурно построенную строку в элемент DIV, созданный в стандартном приложении ExtJS 4 MVC, и мне сложно свернуть голову вокруг того, как я должен использовать динамическую загрузку.Добавление html, сконфигурированного в функции в ExtJS 4 MVC
Так что у меня есть эта функция сама по себе в яваскрипта файл под названием «createHtml.js»:
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 или какое-то нелепые, недопустимые значения innerHTML.
Я бы подумал, что приложение будет знать о fillDiv(), потому что родительский файл fillDiv() находится в javascript index.html, но отлично, createHtml.js не динамически загружается. У меня это есть, я думаю.
Но как сообщить app.js, что моя функция существует в файле за пределами его границ?
(Теперь, «IRL», у меня есть fillDiv, создающий сложный фрагмент html через OpenLayers, чтобы мы могли отображать карту, идентифицированную параметрами param1 и param2, встроенными в форму ExtJS, но я пошел к этому более простому чтобы попытаться выяснить, что я делаю неправильно.)
EDIT: Добавлен 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>
EDIT: Добавление 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 Done. Это вообще помогает? – ruffin
Вы можете видеть и вызывать функцию в родительской области. Просто я не вижу, как вы называете функцию fillDiv(). Также вы можете проверить, определено ли 'console.log (window.fillDiv)' или нет. – Vytautas