Issue calling javascript (ExtJS) in a twig extended a Sonata admin twig / Symfony 2

Question

I'm quite new to php technology. I'm facing some issues I can't really get through.

To sum up quickly, I've added a custom column to the admin list generated by Sonata Admin-Bundle.
In this column, I have an icon of a map. For the moment, it is working, the icon is displayed.

What I want, when I click on the icon, is to open a pop-up generated by ExtJS.
I've tested to integrate ExtJS into a Symfony (not Sonata) twig and it worked.
But then when I try the same thing with my custom twig than extend the

base_list_field.html.twig

I encounter errors in my debug tools, and of course the pop-up is not showing. Here's my twig code :

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

{% block field%}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

{% javascripts '@AAAAdminBundle/Resources/public/js/ExtJS4.2/ext-all.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-neptune.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') }}" alt="exemple onclick" style="cursor:pointer;" id="popup-map" />
</div>
{% endblock %}

And here's my JS code:

Ext.require([
'Ext.container.Viewport',
'Ext.state.Manager',
'Ext.state.CookieProvider',
'Ext.window.MessageBox',
'Ext.chart.*',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit',
'Ext.window.MessageBox',

]);

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: 10
                },
                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;
            });
        }
});
}
});

The

button = Ext.get('popup-map');

was working to refer the HTML object in a test I made. But then I have a lots of error like

Object prototype may only be an Object or null //5 times this error when loading the page

Object [object Object] has no method 'addCls' 

Object [object Object] has no method 'hasCls' // when I click somewhere on the page

I'm a bit lost :(. Any tips would be gladly appreciated.

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.