Adding html configured in a function into an ExtJS 4 MVC

Question

I want to inject an old style, procedurally built string into a DIV element that's created in a standard ExtJS 4 MVC application, and I'm having a hard time wrapping my head around how I'm supposed to leverage dynamic loading.

So say I have this function by itself in a javascript file called "createHtml.js":

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

Elsewhere, in my MVC ExtJS 4 app (so in an object referenced within app.js, I have the following:

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

In my index.html page, I include a reference to createHtml.js. In my app.js file, I have something like the following:

( 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]
        });
    });
})();

Now if I attach a listener to a button somewhere on MyUI and have it call fillDiv('map'); I get a Uncaught ReferenceError: fillDiv is not defined error.

If I put fillDiv not in its own file (createHtml.js) but MyUI.js (referenced by pcard, above), I'm golden. So I know it's not a super-stupid issue like having the div id wrong or some wacky, invalid innerHTML value.

I would have thought the app would know about fillDiv() because fillDiv()'s parent file is in index.html's javascript includes, but fine, createHtml.js isn't being dynamically loaded. I've got that, I guess.

But how do I tell app.js that my function exists in a file outside of its bounds?

(Now, "IRL", I've got fillDiv creating a complicated piece of html via OpenLayers so that we can display a map identified by param1 and param2 embedded in the ExtJS form, but I've gone to this simpler setup to try and figure out what I'm doing wrong.)

EDIT: Added index.html. createHtml.js contains the fillDiv() method. Note that the DIV that takes the map isn't in the index.html; it's, again, defined in an ExtJS Panel.

<!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: Adding 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]
        });
    });
})();

Please share you index.html file with the reference to createHtml.js — Macy Abbey
You can see and call function in parent scope. Just I cant see where you call fillDiv() function. Also you can test if console.log(window.fillDiv) defined or not — Vytautas
app.js creates an object that creates a GUI. Part of that UI creation is the fillDiv call. If I call fillDiv from the included file, nothing. If I call fillDiv2 (the same function that I put into the object file), it works. I'll add the function call. — ruffin

lvojnovic lvojnovic · Accepted Answer · 2012-05-26T17:42:41

I would leave just a comment, but I don't have enough points for that.

You didn't include a index.html file with imports of your createHtml.js and app.js files. But the first thing I would check is that your createHtml.js import is placed above app.js.

Adding html configured in a function into an ExtJS 4 MVC

1 Answers