Uncaught TypeError: Object prototype may only be an Object or null with ExtJS in Symfony 2

Question

I have a list of entity displayed with the Admin-Bundle of Sonata, in Symfony 2. I have override the list to add a custom column that display a map icon by entity. Then, when someone click on the icon, it displays a pop-up. The pop-up is constructed by ExJS 4.

When my list has only one entity, the pop-up is displaying correctly.

Bu when I have more than one entity (and then x map icon), the pop-up is not displaying anymore and I have this error in console :

Uncaught TypeError: Object prototype may only be an Object or null

If I have 7 entites, the error is displaying 7 times.

Here's my twig code :

{% extends 'SonataAdminBundle:CRUD:base_list_field.html.twig' %}

{% block field%}

{% javascripts '@AAAAdminBundle/Resources/public/js/ExtJS4.2/ext-all-debug.js' %}
<script src="{{ asset_url }}"></script>
<script>
    Ext.Loader.setPath('Ext', '/bundles/aaaadmin/js/ExtJS4.2/src');
</script>
{% endjavascripts %}


{% stylesheets 'bundles/aaaadmin/js/ExtJS4.2/resources/css/ext-all-gray.css' filter='cssrewrite' %}
        <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

{% javascripts '@AAAAdminBundle/Resources/public/js/popup.js' %}
     <script src="{{ asset_url }}"></script>
{% endjavascripts %}

<div>
<img src="{{ asset('bundles/aaaadmin/images/map_magnify.png') }}"   
 style="cursor:pointer;"
id="popup-map">
</div>
{% endblock %}

Here's my JS code :

Ext.require([
'Ext.container.Viewport',
'Ext.window.MessageBox',
'Ext.layout.container.Fit',
]);

Ext.application({
name: 'popup',
launch: function() {
    var popup,
    button = Ext.get('popup-map');
    button.on('click', function(){
        if (!popup) {
            popup = Ext.create('widget.window', {
                title: 'Pop-Up',
                id: 'popup',
                header: {
                    titlePosition: 2,
                    titleAlign: 'center'
                },
                border: false,
                closable: true,
                closeAction: 'hide',
                width: 800,
                minWidth: 400,
                maxWidth: 1200,
                height: 500,
                minHeight: 550,
                maxHeight: 800,
                tools: [{type: 'help'}],
                layout: {
                    type: 'border',
                    padding: 0
                },
                items: [
                    {
                    region: 'center',
                    xtype: 'tabpanel',
                    plain: true,
                    items: [
                        {
                        title: 'Carte',
                        html: 'On mettra la carte ici',
                        border: false,
                        },
                        {
                        title: 'Description',
                        html: 'Attributs de l\'objet sous forme de tableau',
                        border: false,
                        }
                    ]
                    }
                ]
            });
        }
        button.dom.disabled = true;
        if (popup.isVisible()) {
            popup.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            popup.show(this, function() {
                button.dom.disabled = false;
            });
        }
});
}
});

Anyone has an idea why ?

edit : By looking the source code of the page, it looks like JS file is loaded for each row of the list. Maybe the problem is coming from there, and it can explains why it works when there is only one row (and so one load of the JS).

Answer 1

After looking forward, the problem is not coming from my JS code, but by the fact that if I have several entites displayed in a grid, the ext-all-debug.js is loaded the same amount of time there is entites. And then it seems to generate error.

I guess I could move the library to the main template of Sonata. I've tried, there is some bugs but it's working more efficiently.

But then, I guess this is not the correct solution because I don't want to touch to sonata template.

I'll keep it updated if I find the solution.